css实现图片正反面翻转特效

admin

css实现图片正反面翻转特效
html代码如下：

1. <div class="father">
   
2.                 <div class="before">正面</div>
   
3.                 <div class="after">反面</div>
   
4. </div>
   

复制代码

css样式代码如下：

1. .father{
   
2.         width: 300px;
   
3.         height: 200px;
   
4.         position: relative;
   
5.         transition: all 1s linear;
   
6.         transform-style: preserve-3d;
   
7.         }
   
8. .before,.after{
   
9.         width: 300px;
   
10.         height: 200px;
    
11.         position: absolute;
    
12.         top: 0;
    
13.         left: 0;
    
14. }
    
15. .before{
    
16.         background: red;
    
17. }
    
18. .after{
    
19.         background: lightblue;
    
20.         transform: rotateX(-180deg);
    
21. }
    
22. .father:hover{
    
23.         transform: rotateX(180deg);
    
24. }
    

复制代码

注意事项：
        ps:1. 若缺少transform-style:preserve-3d；图片翻转效果就无法实现，实现翻转的关键
        2. transform-style属性需要配合transform属性使用，默认值是flat（子元素保留其3D位置。在2D平面呈现）；preserve-3d（子元素保留其3D位置）。