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

待我称王封你为后i 2022-02-26 03:09 234阅读 0赞

### 错误的思路 ###

1.  先看效果图（这里准备两张相同的图片）  
    ![img效果][img]
2.  刚开始的思路:两张层叠的图片，旋转第一张，在旋转第二张。通过时间差来实现，然后出现了bug,以为是层级问题，但是背后一张回去的时候显示
3.  HTML结构

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);
    		}

### 正确的解决方式 ###

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 ###

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

指定元素背面是否可见，可为以下值：  
visible 表示背面可见，允许显示正面的镜像。  
hidden 表示背面不可见。  
[正方形透视案例][Link 1]

[img]: /images/20220226/887a17bfd9aa424fae2503648e4619f5.png
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/backface-visibility