CSS3 3D翻轉動畫
阿新 • • 發佈：2017-12-29
strong ani size 坐標 animation 面向 ner face for
CSS3動畫屬性：
transform（變換）：大小、位置、顏色、變形等狀態的變化
transition（過渡）：初始狀態過渡到結束狀態這個過程中產生的動畫
animation（動畫）：定義關鍵幀動畫
CSS3可以實現多種動畫效果，下面說的是CSS3實現一個3D翻轉的動畫效果。
<div class="container"> <div class="wrapHover> <div class="wrap"> <div class="font"> <img src="img/01.png"> </div> <div class="back"> <img src="img/02.png"> </div> </div> </div> </div>
.container{ perspective: 800px; perspective-origin: 50% 50%; } //創建3D環境 .wrapHover{ width: 200px; height: 200px; overflow: hidden; } .wrap{ position: relative; backface-visibility: hidden; transform-style: preserve-3d; } .wrap div{ position: absolute; top: 0; left: 0; } .font{ backface-visibility: hidden; } .back{ backface-visibility: hidden; transform: rotateY(180deg); } .wrapHover:hover .wrap{ transform: rotateY(180deg); }
屬性介紹：
perspective 指定觀察者與z=0平面的距離，perspective-origin 指定透視點坐標值，首先使用 perspective 和 perspective-origin 屬性創建一個3D環境；
transform-style 指定某元素的子元素是否位於三維空間內；backface-visibility 指定元素背面面向用戶時是否可見，該屬性不可繼承。
CSS3 3D翻轉動畫