使用CSS3 backface-visibility属性制作翻转动画效果： http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504151686.html
详解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 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>