CSS3 3D翻轉動畫

風暴阿呆發表於2017-12-14
CSSS33D動畫

CSS3 3D翻轉動畫

CSS3動畫屬性：
transform（變換）：大小、位置、顏色、變形等狀態的變化
transition（過渡）：初始狀態過渡到結束狀態這個過程中產生的動畫
animation（動畫）：定義關鍵幀動畫

CSS3可以實現多種動畫效果，下面說的是CSS3實現一個3D翻轉的動畫效果。上程式碼：

html程式碼：
<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>複製程式碼

css程式碼：
.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 指定元素背面面向使用者時是否可見，該屬性不可繼承。


相關文章