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 不然不添加的话位移到盒子外面的图片会被看到，所以不能缺失）

CSS3-transform位移实现双开门效果的相关教程结束。