css3 2D位移transfrom

最新推荐文章于 2024-03-20 15:35:46 发布

前端啊龙

最新推荐文章于 2024-03-20 15:35:46 发布

阅读量47

点赞数

文章标签： css3 3d css

本文链接：https://blog.csdn.net/m0_65354547/article/details/131675785

版权

基本语法：transform:translate()
将元素再水平或垂直方向上移动指定距离
translate(参数1，参数2)：水平方向平移和垂直方向位移
translate（参数）：只能实现水平方向的移动
translateX（参数）：水平方向位移
translateY（参数）：垂直方向位移

   <style>
        div{
            background-color: red;
            width: 300px;
            height: 300px;
            margin: 50px auto;
        
            transition:all 3s;



        }
        div:hover{
        
            transform: translate(50px,0)//正数往左，负数往右
        }
    </style>

当参数是百分比的单位时。位移的长度是参照本身大小的

## **位移可以配合绝对定位实现水平垂直居中**
   div{
            background-color: red;
            width: 300px;
            height: 300px;
            margin: 50px ;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);

        }

案例

    <style>
*{
    margin: 0;
    padding: 0;
}
img{
    transition:all 1s;
}
    .box{
        width: 1000px;
        height: 600px;
        background:url(../image/bg.jpg) ;
        margin:50px auto;
        position: relative;
        overflow: hidden;
    }
    img:nth-child(1){
        position: absolute;
        left: 100px;
        top: 50px;
       
    }
    img:nth-child(2){
        position: absolute;
        left: 1000px;
        bottom: 600px;
    }
    img:nth-child(3){
        position: absolute;
        left: 1000px;
        top: 600px;
    }
    .box:hover img:nth-child(1){
        transform: translate(-90px);

    }
    .box:hover img:nth-child(2){
        transform: translate(-400px,275px);

    }
    .box:hover img:nth-child(3){
        transform: translate(-400px,-275px);

    }
    </style>
</head>
<body>
    <div class="box">
        <img src="../image/01.jpg" alt="">
        <img src="../image/02.jpg" alt="">
        <img src="../image/03.jpg" alt="">

    </div>
    </body>

前端啊龙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 2D位移transfrom

translate(参数1，参数2)：水平方向平移和垂直方向位移。基本语法：transform:translate()translate（参数）：只能实现水平方向的移动。translateX（参数）：水平方向位移。translateY（参数）：垂直方向位移。将元素再水平或垂直方向上移动指定距离。
复制链接

扫一扫