transform实现位移-第二十一天

平面转换

目标:使用transform属性实现元素的位移、旋转、缩放等效果

平面转换
- 改变盒子在平面内的位置形态(位移、旋转、缩放)
- 2D转换
平面转换属性
- transform

位移

语法
- transform:teanslate(水平移动距离,垂直移动距离)
取值(正负均可)
- 参照元素的原始坐标进行偏移,不会影响其他元素
- 像素单位数值
- 百分比(参照物为盒子自身尺寸)
- 注意:X轴正向为右,Y轴正向为下
技巧
- translate()如果只给出一个值,表示x轴方向移动距离
- 单独设置某个方向的移动距离:translateX()&translateY()

位移-绝对定位居中

目标:使用translate快速实现绝对定位元素的居中效果

实现方法

position:absolute;
left:50%;
top:50%;
/*如果有明确的宽高,使用margin*/
/*margin-left:-100px;
margin-top:-50px;*/
transform:tranlate(-50%,*50%);

双开门案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }

        .box{
            position: relative;
            width: 1400px;
            height: 600px;
            background: url(./imges/bg.jpg);
            margin: 50px auto;
            overflow: hidden;
        }
        /* 利用::befo喝::after创建左右门 */
        .box::before,
        .box::after{
            position:absolute;
            top: 0;
            content: "";
            width:50%;
            background:url(./images/fm.jpg);
            transition: 1s;
        }
        .box::after{
            right: 0;
            background-position: right;
        }
        /* 实现左边图的便宜,往右偏移整个容器的宽度 */
        .box:hover::before{
            transform:translate(-100%);
        }
        .box:hover::after{
            transform: translate(100%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>