CSS transform-style属性实现3D效果

Posted 2020-08-05 学海泛舟拾贝

相对于transform-style:flat，在2d平面呈现，transform-style:preserve-3d则将所有子元素呈现在3d空间中。

    实例：

    html：

 1 <div class="transform-style">
 2     <h3>鼠标放到图片上面来查看效果哦！(图片反转360度)</h3>
 3     <div class="container">
 4         <div class="inner">
 5             <div class="rotate">
 6                 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
 7             </div>
 8         </div>
 9     </div>
10 
11     <h3>鼠标放到图片上面来查看效果哦！(图片反转360度--使用transform-style: preserve-3d;效果)</h3>
12     <div class="container">
13         <div class="inner">
14             <div class="rotate three-d">
15                 <img src="http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg" alt="" width="142" height="200" />
16             </div>
17         </div>
18     </div>
19     </div>

View Code

   CSS：

 1 .transform-style .container {
 2         width:500px;
 3         height:300px;
 4         margin:10px auto;
 5         position:relative;
 6     }
 7     .transform-style .inner {
 8         width:142px;
 9         height:200px;
10         position:absolute;
11     }
12     //设置动画
13     @keyframes inner{
14         0%{
15             transform:rotateY(0deg)
16         }
17         100%{
18             transform:rotateY(360deg)
19         }
20     }
21     //调用动画
22     .transform-style .inner:hover{
23         animation:inner 5s linear infinite;
24     }
25 
26     .transform-style .rotate {
27         background: url("http://images2015.cnblogs.com/blog/561794/201604/561794-20160412230412973-1641353956.jpg") no-repeat center;
28         border: 5px solid hsla(50,50%,50%,.9);
29         transform: perspective(200px) rotateY(45deg);
30     }
31     .transform-style .rotate img{
32         border: 1px solid green;
33         transform: rotateX(15deg) translateZ(10px);
34         transform-origin: 0 0 40px;
35     }
36     //改变transform-style的默认值
37     .transform-style .three-d {
38         transform-style: preserve-3d;
39     }

View Code

 

 

 

 查看在线显示demo