CSS3-transform位移实现双开门效果

transform可以用于实现位移，旋转，缩放等效果。

位移：transform: translate(水平距离,垂直距离);

这里先借助其位移属性实现双开门的效果，鼠标hover的时候最上面的图片向两边展开，鼠标离开的时候恢复原状。

先定义一个盒子呈放底层的图片，在分别定义两个元素去添加背景图片，并将这两个元素定位到先前定义的盒子上。依次思路书写代码如下：

<div class='box'>
        <img src="../images/bg.jpg" alt="">
</div>

       .box {
            position: relative;
            margin: 100px auto;
            width: 1366px;
            height: 600px;
            overflow: hidden;
        }

        .box::before,
        .box::after {
            position: absolute;
            content: '';
            top:0;
            width: 50%;
            height: 600px;
            background-image: url(../images/fm.jpg);

            transition: transform .5s;
        }

        .box::after {
            right: 0;
            background-position: right 0;
        }

        .box:hover::before{
            transform: translate(-100%);
        }

        .box:hover::after{
            transform: translate(100%);
        }

这个地方覆盖在上面的图片用的是同一张图片，通过设置两个伪元素的宽度为50%以及将after伪元素设置背景图位置水平从右往左，垂直为0的方式实现了整图的还原覆盖。借助transform位移属性实现效果的切换（父元素的overflow:hidden 不然不添加的话位移到盒子外面的图片会被看到，所以不能缺失）