心系少時(shí)言 等一不歸人

圖片來自網(wǎng)絡(luò)

CSS3動(dòng)畫屬性：
transform（變換）：大小、位置、顏色、變形等狀態(tài)的變化
transition（過渡）：初始狀態(tài)過渡到結(jié)束狀態(tài)這個(gè)過程中產(chǎn)生的動(dòng)畫
animation（動(dòng)畫）：定義關(guān)鍵幀動(dòng)畫

CSS3可以實(shí)現(xiàn)多種動(dòng)畫效果，下面說的是CSS3實(shí)現(xiàn)一個(gè)3D翻轉(zhuǎn)的動(dòng)畫效果。上代碼：

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%;
}    //創(chuàng)建3D環(huán)境
.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 指定透視點(diǎn)坐標(biāo)值，首先使用 perspective 和 perspective-origin 屬性創(chuàng)建一個(gè)3D環(huán)境；
transform-style 指定某元素的子元素是否位于三維空間內(nèi)；backface-visibility 指定元素背面面向用戶時(shí)是否可見，該屬性不可繼承。