站長(zhǎng)資訊網(wǎng)在css3中，可以使用transform屬性配合rotateY()、rotateX()等3d旋轉(zhuǎn)函數(shù)來(lái)實(shí)現(xiàn)3d翻轉(zhuǎn)效果。rotateX()可以使元素繞其X軸旋轉(zhuǎn)給定角度，rotateY()可以使元素繞其Y軸旋轉(zhuǎn)給定角度。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
一、實(shí)現(xiàn)一張圖片的翻轉(zhuǎn)
1、HTML結(jié)構(gòu)
<div class="stage"> <div class="flipBox"> <figure class="pic front">Front</figure> <figure class="pic back">Back</figure> </div> </div>
上述HTML的結(jié)構(gòu)是：
- p.stage規(guī)定了一個(gè)3D舞臺(tái)，基本上所有使用CSS3 3D變換的實(shí)現(xiàn)都會(huì)這么做，規(guī)定perspective樣式從而達(dá)到透視效果
- p.flipBox是真正實(shí)現(xiàn)翻面的容器，稍后將對(duì)它進(jìn)行3D變換
- figure代表兩張圖片，一張是正面，一張是背面
思路是：將figure.front和figure.back作為翻轉(zhuǎn)圖片的正反面。圖片翻轉(zhuǎn)后，figure.back將變成面對(duì)用戶的那一面，figure.front將背對(duì)用戶。
初始狀態(tài)下figure.back是水平翻轉(zhuǎn)過的（即transform: rotateY(180deg)），這樣圖片翻轉(zhuǎn)后背面的文字將正著顯示（否則翻轉(zhuǎn)過來(lái)以后背面的文字是倒著的——因?yàn)榉崔D(zhuǎn)之前是正著的嘛~）。
3、CSS結(jié)構(gòu)
body,figure { margin: 0; padding: 0; } .stage { width: 200px; height: 100px; margin: 40px; perspective: 1000px; } .flipBox { width: 200px; height: 100px; position: relative; transform-style: preserve-3d; transition: transform 1s; } .pic { width: 200px; height: 100px; font-size: 24px; color: #fff; line-height: 100px; text-align: center; position: absolute; top: 0; left: 0; backface-visibility: hidden; } .front { background: #f00; } .back { background: #090; transform: rotateY(180deg); }
現(xiàn)在分析每個(gè)元素的CSS：
body,figure { margin: 0; padding: 0; }
沒什么好說(shuō)的，去掉內(nèi)外邊距！
.stage { width: 200px; height: 100px; margin: 40px; perspective: 1000px; }
為3D舞臺(tái)定義樣式。margin是為了距離瀏覽器左邊和上邊有一些距離，讓變換顯示的更完整。perspective規(guī)定了3D元素距攝像機(jī)（或人眼）的距離，值越小3D元素離人眼越近，值越大3D元素離人眼越遠(yuǎn)。
.flipBox { width: 200px; height: 100px; position: relative; transform-style: preserve-3d; transition: transform 1s; }
為翻轉(zhuǎn)盒子定義樣式。這個(gè)元素是真正進(jìn)行3D變換的元素。其position屬性是為其兩個(gè)子figure元素創(chuàng)造定位點(diǎn)，以便兩個(gè)子figure元素定位到p.flipBox的左上角實(shí)現(xiàn)兩張圖片的對(duì)齊。transform-style屬性是必須的，這規(guī)定了p.flipBox元素的后代元素是以哪種形式進(jìn)行3D變換（preserve-3d表示后代元素任然以3d的模式進(jìn)行變換；另一個(gè)值flat表示只對(duì)p.flipBox進(jìn)行3D變換，后代元素則只是p.flipBox平面中的內(nèi)容，不進(jìn)行3D變換），這和After Effect中的偽3D十分相似。transition規(guī)定只變換transform屬性，時(shí)間為1s.
.pic { width: 200px; height: 100px; font-size: 24px; color: #fff; line-height: 100px; text-align: center; position: absolute; top: 0; left: 0; backface-visibility: hidden; }
為兩張圖片（這里的兩個(gè)figure）規(guī)定統(tǒng)一的樣式。使用絕對(duì)定位，定位到p.flipBox的左上角，而兩個(gè)figure的大小又是一樣的，所以完美重疊。backface-visibility是一個(gè)重要的屬性，它規(guī)定背對(duì)用戶的3D元素是否顯示，這里應(yīng)該規(guī)定為不顯示（hidden），否則不該顯示背面的時(shí)候背面會(huì)顯示出來(lái)。比如初始狀態(tài)，顯然不應(yīng)該顯示figure.back，但又因?yàn)閒igure.back是后渲染的，所以會(huì)覆蓋在figure.front上，我們之前為figure.back規(guī)定了transform: rotateY(180deg)，所以figure.front是背對(duì)用戶的，將不顯示。再比如翻轉(zhuǎn)過后，figure.front會(huì)擋在figure.back前面，不過此時(shí)figure.front將會(huì)背對(duì)用戶，所以被backface-visibility隱藏了，這正是我們想要的。
.front { background: #f00; }
規(guī)定了圖片正面為紅色。
.back { background: #090; transform: rotateY(180deg); }
規(guī)定了圖片背面為綠色，同時(shí)，transform: rotateY(180deg)規(guī)定在初始狀態(tài)，figure.back是水平翻轉(zhuǎn)180°的。
3、開始旋轉(zhuǎn)圖片
.stage:hover .flipBox { transform: rotateY(-180deg); }
當(dāng)鼠標(biāo)移入3D舞臺(tái)時(shí)，將p.flipBox旋轉(zhuǎn)-180°，實(shí)現(xiàn)圖片翻轉(zhuǎn)效果。這里讓p.flipBox旋轉(zhuǎn)+180°也是可以的，只是旋轉(zhuǎn)的方向不同罷了。 
二、案例
1、圖片準(zhǔn)備
為減少HTTP請(qǐng)求，這里使用精靈圖。 
圖片大小為200*200，分上下兩部分，上方為翻轉(zhuǎn)圖片的正面（黑白），下方為翻轉(zhuǎn)圖片的背面（彩色）。上方和下方的logo都經(jīng)過水平居中和垂直居中，以保證翻轉(zhuǎn)前后logo位置一致。
2、代碼實(shí)現(xiàn)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>JavaScript Study</title> <style> html,body,ul,li,a,figure,h4 { padding: 0; margin: 0; } ul { list-style: none; } h4 { display: none; } .Stage { width: 604px; height: 203px; margin: 50px; border-left: 1px solid #f5f5f5; border-top: 1px solid #f5f5f5; perspective: 10000px; } .trigger { display: block; float: left; width: 200px; height:100px; border-right: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; position: relative; } .flipBox { display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.2s; transition-delay: 0.03s; } .trigger:hover .flipBox { transform: perspective(10000px) rotateY(-180deg); /*這里的perspective為每個(gè)flipBox規(guī)定單獨(dú)的視點(diǎn)距離，解決Chrome中統(tǒng)一視點(diǎn)的問題*/ } .plane { width: 200px; height: 100px; position: absolute; top: 0; left: 0; backface-visibility: hidden; } .back { transform: rotateY(180deg); } .logo1 figure.front { background: url("pic.png") center 0 no-repeat; } .logo2 figure.front { background: url("pic_2.png") center 0 no-repeat; } .logo3 figure.front { background: url("pic_3.png") center 0 no-repeat; } .logo4 figure.front { background: url("pic_4.png") center 0 no-repeat; } .logo5 figure.front { background: url("pic_5.png") center 0 no-repeat; } .logo6 figure.front { background: url("pic_6.png") center 0 no-repeat; } .logo1 figure.back { background: url("pic.png") center -100px no-repeat; } .logo2 figure.back { background: url("pic_2.png") center -100px no-repeat; } .logo3 figure.back { background: url("pic_3.png") center -100px no-repeat; } .logo4 figure.back { background: url("pic_4.png") center -100px no-repeat; } .logo5 figure.back { background: url("pic_5.png") center -100px no-repeat; } .logo6 figure.back { background: url("pic_6.png") center -100px no-repeat; } </style> </head> <body> <div> <ul> <li> <a class="flipBox logo1" href="#"> <h4>Fun Games</h4> <figure class="plane front"></figure> <figure class="plane back"></figure> </a> </li> <li> <a class="flipBox logo2" href="#"> <h4>Man Style</h4> <figure class="plane front"></figure> <figure class="plane back"></figure> </a> </li> <li> <a class="flipBox logo3" href="#"> <h4>Sims.</h4> <figure class="plane front"></figure> <figure class="plane back"></figure> </a> </li> <li> <a class="flipBox logo4" href="#"> <h4>Googla</h4> <figure class="plane front"></figure> <figure class="plane back"></figure> </a> </li> <li> <a class="flipBox logo5" href="#"> <h4>JavaScript</h4> <figure class="plane front"></figure> <figure class="plane back"></figure> </a> </li> <li> <a class="flipBox logo6" href="#"> <h4>Felix</h4> <figure class="plane front"></figure> <figure class="plane back"></figure> </a> </li> </ul> </div> </body> </html>
（學(xué)習(xí)視頻分享：css視頻教程）
