css3--之backface-visibility

2024-02-10 20:59•css•阅读 2561

详解CSS3的perspective属性设置3D变换距离的方法： http://www.jb51.net/css/462429.html

注意，为了指转换子元素变形的深度，perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective属性结合起来使用，以便将视点移至元素的中心以外位置。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             .contain {
 8                 position: relative;
 9                 margin: 0 auto;
10                 width: 150px;
11                 height: 570px;
12             }
13             
14             .door {
15                 perspective-origin: top right;  
16                 position: absolute;
17                 transform: perspective(600px) rotateY(-50deg);
18                 transform-origin: left;
19                 animation: open 1s ease-in-out infinite;
20                 -webkit-animation: open 4s ease-in-out infinite;
21                 
22             }
23             
24             
25             .front {
26                 backface-visibility: hidden;
27                 -webkit-backface-visibility: hidden;
28                 /*z-index: 2;*/
29             }
30             
31             @keyframes open{
32                 
33                 50%{
34                     transform: perspective(600px) rotateY(145deg);
35                 }
36             }
37         </style>
38     </head>
39     <body>
40         
41         <!--perspective(600px) 给元素本身设置
42         perspective: 600px 给元素父级设置
43         perspective-origin: top right;  设置观察角度-->
44         
45         <!--.svg 矢量图   用AI打开或浏览器-->
46         <div class="contain">
47     
48             <img class="door back" src="img/doorback.svg" >
49       
50             <img class="door front" src="img/doorfront.svg" >
51               
52             <img class="door window" src="img/doorwindow.svg" >
53            
54         </div>
55     </body>
56 </html>

上一篇 »纯css3 开关按钮
下一篇 »CSS3六边形