本集,，介紹一個能圍繞x軸,、y軸、z軸旋轉(zhuǎn)的,，具有透視效果的動畫,。將鼠標(biāo)放在圖片上，請看下面動畫效果,。

       代碼：

＜div align="center"＞
＜style type="text/css"＞.翻轉(zhuǎn)動畫 {
perspective: 500px;
float:left;
margin-left:12px;
border:10px solid #f00;}
.翻轉(zhuǎn)動畫:hover .front { transform: rotateX(360deg) rotateY(-360deg) rotateZ(360deg); }
.翻轉(zhuǎn)動畫, .front, .back {width: 290px;height: 530px;}
.翻轉(zhuǎn) {
transition: transform ease-in-out;
transform-style: preserve-3d;
display:block;
position: relative;}
.front, .back {
transition: 20s ease-out;
position: absolute; }
.front img, .back img{ width:290px; height:530px; }
.front {z-index:2;}
.back {z-index:1;}
＜/style＞
＜ul＞
＜li class="翻轉(zhuǎn)動畫" ontouchstart="this.class List.toggle;"＞
＜p class="front "＞＜a class="翻轉(zhuǎn)" href="圖1"＞＜img
src="http://image109.360doc.com/DownloadImg/2022/09/1508/252081747_1_20220915080927414.jpg" /＞＜/a＞＜/p＞
＜p class="back "＞＜a class="翻轉(zhuǎn)" href="圖1"＞＜img
src="http://img2.oldkids.cn/upload/260811000/u260810070/2016/11/21/blog_
20161121093517976018.gif" /＞＜/a＞＜/p＞
＜/li＞
＜li class="翻轉(zhuǎn)動畫" ontouchstart="this.classList.toggle;">
＜p class="front "＞＜a class="翻轉(zhuǎn)" href="圖2"＞＜img
src="http://image109.360doc.com/DownloadImg/2022/09/1508/252081747_3_20220915080928524.jpg" /＞＜/a＞＜/p＞
＜p class="back "＞＜a class="翻轉(zhuǎn)" href="圖2"＞＜img
src="http://img3.oldkids.cn/upload/260811000/u260810070/2016/11/21/blog_
20161121093519967791.gif" /＞＜/a＞＜/p＞
＜/li＞
＜/ul＞

       代碼解析：

       perspective: 300px 該代碼是透視的意思,，可以反應(yīng)出近大遠(yuǎn)小的透視效果，產(chǎn)生出明顯的立體空間,。

       float:left 定義元素浮動方向,，設(shè)置了float 屬性，使元素成為浮動元素,，它會生成一個塊級框,，可以設(shè)置其寬高。并且有了它,，元素才能橫向排列,。如果沒它，圖片則縱向排列,。

       margin-left:15px 左外邊距,。

       border:10px solid #f00 邊框線的厚度、樣式和顏色,。

       transform: rotatey(360deg) 這是規(guī)定3D效果的代碼,，transform 屬性有三個值，分別為 rotatex rotatey rotatez ,即三個不同的旋轉(zhuǎn)軸（x,、y,、z）。朋友們可以試用一下這不同的軸,，別有趣味,。如果同時(shí)寫入兩個軸的屬性或三個軸的屬性都寫上也可以。例如 rotatex(360deg) rotatey(360deg) rotatez(360deg) 圖片就會“亂”翻了，也很有意思,。

       width: 290px;height: 530px 圖中紅色邊框線的寬高,。

       transition: transform ease-in-out 該代碼是規(guī)定過渡方式的，變換屬性transform 有四個值,。ease 規(guī)定慢始慢終,，中間快。 ease-in 規(guī)定慢速開始,。 ease-out 規(guī)定慢速結(jié)束,。 ease-in-out 規(guī)定慢速開始和結(jié)束，勻速過渡,。

       display:block 其中 display 屬性是規(guī)定元素顯示方式的,， block 表示為塊級元素。

       position: absolute 絕對定位,。

       .front img, .back img{ width:290px; height:530px; } class="白">圖片寬高,。

        .back {transform: rotateY(0deg);z-index:1;} 此代碼是屬于靜止圖片的，其中 z-index:1; 重疊順序代碼,，其值為正整數(shù),。在此，它的值是 1 比較而言,，是小的,，所以該圖在后面（下面）。

        .front {transform: rotateY(-180deg);z-index:2;} 此代碼是屬于旋轉(zhuǎn)圖片的,，其中 z-index:2; 重疊順序代碼,，其值為正整數(shù)。在此,，它的值是 2 比較而言,，是大的，所以該圖在后面（上面）,。

       在使用了絕對定位的條件下,，讓不同的對象盒子以不同順序重疊排列，就要用到重疊順序代碼 z-index ,，相對來說,，哪個的值越大，哪個就越靠前,，或者說靠上,。