好玩的CSS3（3）-- 翻转（旋转正反两张）图片

错误的思路

    1、先看效果图（这里准备两张相同的图片）

1. 2、刚开始的思路:两张层叠的图片，旋转第一张，在旋转第二张。通过时间差来实现，然后出现了bug,以为是层级问题，但是背后一张回去的时候显示
2. 3、HTML结构

3. <div>
     <img class="a" src="img/hou.svg" alt="">
     <img class="b" src="img/qian.svg" alt="">
   </div>

   div {
     width: 224px;
     height: 224px;
     position: relative;
     margin: 50px auto;
   }
   div img {
     position: absolute;
     left: 0;
     top: 0;
   }
   .b {
     transition: all 1s linear;
   }
   .a {
     transition: all 2s linear;
   }
   div:hover .b {
     transform: rotateY(90deg);
   }
   div:hover .a {
     /* transition-delay: 1s; */
     transform: rotateY(180deg);
   }

   正确的解决方式

4. div {
     position: relative;
     margin: 100px auto;
     width: 224px;
     height: 224px;
   }
   div img {
     position: absolute;
     left: 0;
     top: 0;
     transition: all 2s;
   }
   div img:first-child {
     z-index: 1;
     backface-visibility: hidden;
   }
   div:hover img {
     transform: rotateY(180deg);
   }

   backface-visibility

5. 指定当元素背面朝向观察者时是否可见。元素的背面总是透明的，当其朝向观察者时，显示正面的镜像。在某些情况下，我们不希望元素内容在背面可见，比如实现翻牌效果。因为2D变换无透视效果，故该属性对2D变换无效。

    指定元素背面是否可见，可为以下值：

    visible 表示背面可见，允许显示正面的镜像。

    hidden 表示背面不可见。

    正方形透视案例