早前2011年5月就在站上寫了一篇《CSS3 Transform》介紹CSS3中Transform屬性的簡(jiǎn)單應(yīng)用。但這篇文章里的知識(shí)無(wú)法滿足大家對(duì)Transform的一個(gè)全面認(rèn)識(shí)，最近重新整理了一個(gè)Transform系列的文章，希望對(duì)初學(xué)者有所幫助。前幾天介紹了《CSS3 Transform——transform-origin》、《Transform-style和Perspective屬性》和《CSS3 2D Transform》。今天是這個(gè)系列的最后一篇——CSS3 3D Transform。

作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師，你可能熟悉在二維空間工作，但是在三維空間上工作并不太熟悉。使用二維變形我們能夠改變?cè)卦谒胶痛怪陛S線，然而還有一個(gè)軸沿著它，我們可以改變?cè)?。使用三維變形，我們可以改變?cè)卦赯軸位置。

三維變換使用基于二維變換的相同屬性，如果您熟悉二維變換，你們發(fā)現(xiàn)3D變形的功能和2D變換的功能相當(dāng)類似。CSS3中的3D變換主要包括以下幾種功能函數(shù)：

• 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()兩個(gè)功能函數(shù)；
• 3D旋轉(zhuǎn)：CSS3中的3D旋轉(zhuǎn)主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個(gè)功能函數(shù)；
• 3D縮放：CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個(gè)功能函數(shù)；
• 3D矩陣：CSS3中3D變形中和2D變形一樣也有一個(gè)3D矩陣功能函數(shù)matrix3d()。

CSS3 3D位移

在CSS3中3D位移主要包括兩種函數(shù)translateZ()和translate3d()。translate3d()函數(shù)使一個(gè)元素在三維空間移動(dòng)。這種變形的特點(diǎn)是，使用三維向量的坐標(biāo)定義元素在每個(gè)方向移動(dòng)多少。其基本語(yǔ)法如下：

translate3d(tx,ty,tz)

其屬性值取值說(shuō)明如下：

• tx：代表橫向坐標(biāo)位移向量的長(zhǎng)度；
• ty：代表縱向坐標(biāo)位移向量的長(zhǎng)度；
• tz：代表Z軸位移向量的長(zhǎng)度。此值不能是一個(gè)百分比值，如果取值為百分比值，將會(huì)認(rèn)為無(wú)效值。

一起來(lái)看一個(gè)簡(jiǎn)單的實(shí)例，加深對(duì)translate3d()函數(shù)的理解：

HTML

<div class="stage s1">
    <div class="container">
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
    </div>
</div>
<div class="stage s2">
    <div class="container">
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
    </div>
</div>

CSS

.stage {
    width: 300px;
    height: 300px;
    float: left;
    margin: 15px;
    position: relative;
    background: url(http://www./sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;

    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.container img {
    position: absolute;
    margin-left: -35px;
    margin-top: -50px; 
}
.container img:nth-child(1){
    z-index: 1;
    opacity: .6;
}
.s1 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: translate3d(30px,30px,200px);
    -moz-transform: translate3d(30px,30px,200px);
    -ms-transform: translate3d(30px,30px,200px);
    -o-transform: translate3d(30px,30px,200px);
    transform: translate3d(30px,30px,200px);
}
.s2 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: translate3d(30px,30px,-200px);
    -moz-transform: translate3d(30px,30px,-200px);
    -ms-transform: translate3d(30px,30px,-200px);
    -o-transform: translate3d(30px,30px,-200px);
    transform: translate3d(30px,30px,-200px);
}

效果如下所示：

從上圖的效果可以看出，當(dāng)z軸值越大時(shí)，元素也離觀看者更近，從視覺上元素就變得更大；反之其值越小時(shí)，元素也離觀看者更遠(yuǎn)，從視覺上元素就變得更小。

在CSS3中3D位移除了translate3d()函數(shù)之外還有translateZ()函數(shù)。translateZ()函數(shù)的功能是讓元素在3D空間沿Z軸進(jìn)行位移，其基本使用語(yǔ)法如下：

translate(t)

取值說(shuō)明如下：

• t：指的是Z軸的向量位移長(zhǎng)度。

使用translateZ()函數(shù)可以讓元素在Z軸進(jìn)行位移，當(dāng)其值為負(fù)值時(shí)，元素在Z軸越移越遠(yuǎn)，導(dǎo)致元素變得較小。反之，當(dāng)其值為正值時(shí)，元素在Z軸越移越近，導(dǎo)致元素變得較大。在上例的基礎(chǔ)上，我們稍加變化一下，將translate3d()函數(shù)換成translateZ()函數(shù)：

.s1 img:nth-child(2){
    z-index: 2; 
    opacity: .6;
    -webkit-transform: translateZ(200px);
    -moz-transform: translateZ(200px);
    -ms-transform: translateZ(200px);
    -o-transform: translateZ(200px);
    transform: translateZ(200px);
}
.s2 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: translateZ(-200px);
    -moz-transform: translateZ(-200px);
    -ms-transform: translateZ(-200px);
    -o-transform: translateZ(-200px);
    transform: translateZ(-200px);
}

效果如下：

效果再次證明了translateZ()函數(shù)僅讓元素在Z軸進(jìn)行位移，當(dāng)其值越大時(shí)，元素離觀看者越近，視覺上元素放大，反之元素縮小。

translateZ()函數(shù)在實(shí)際使用中等同于translate3d(0,0,tz)。僅從視覺效果上看，translateZ()和translate3d(0,0,tz)函數(shù)功能非常類似于二維空間的scale()縮放函數(shù)，但實(shí)際上完全不同。translateZ()和translate3d(0,0,tz)變形是發(fā)生在Z軸上，而不是X軸和Y軸。當(dāng)使用3D變形，能夠在一Z軸上移動(dòng)一個(gè)元素確實(shí)有很大的好處，比如說(shuō)在創(chuàng)建一個(gè)3D立方體的盒子之時(shí)。

CSS3 3D縮放

CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數(shù)，當(dāng)scale3d()中X軸和Y軸同時(shí)為1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通過(guò)使用3D縮放函數(shù)，可以讓元素在Z軸上按比例縮放。默認(rèn)值為１，當(dāng)值大于１時(shí)，元素放大，反之小于１大于0.01時(shí)，元素縮小。其使用語(yǔ)法如下：

scale3d(sx,sy,sz)

其取值說(shuō)明如下：

• sx：橫向縮放比例；
• sy：縱向縮放比例；
• sz：Z軸縮放比例；

scaleZ(s)

其取值說(shuō)明如下：

• s：指定元素每個(gè)點(diǎn)在Z軸的比例。

scaleZ(-1)定義了一個(gè)原點(diǎn)在Z軸的對(duì)稱點(diǎn)（按照元素的變換原點(diǎn)）。

scaleZ()和scale3d()函數(shù)單獨(dú)使用時(shí)沒有任何效果，需要配合其他的變形函數(shù)一起使用才會(huì)有效果。下面我們來(lái)看一個(gè)實(shí)例，為了能看到scaleZ()函數(shù)的效果，我們添加了一個(gè)rotateX(45deg)功能：

.s1 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: scaleZ(5) rotateX(45deg);
    -moz-transform: scaleZ(5) rotateX(45deg);
    -ms-transform: scaleZ(5) rotateX(45deg);
    -o-transform: scaleZ(5) rotateX(45deg);
    transform: scaleZ(5) rotateX(45deg);
}
.s2 img:nth-child(2){
    z-index: 2; 
    -webkit-transform: scaleZ(.25) rotateX(45deg);
    -moz-transform: scaleZ(.25) rotateX(45deg);
    -ms-transform: scaleZ(.25) rotateX(45deg);
    -o-transform: scaleZ(.25) rotateX(45deg);
    transform: scaleZ(.25) rotateX(45deg);
}

其效果如下所示：

 

CSS3 3D旋轉(zhuǎn)

到目前為止，我們已經(jīng)討論了如何讓一個(gè)元素在平面上進(jìn)行順時(shí)針或逆時(shí)針旋轉(zhuǎn)。在三維變形中，我們可以讓元素在任何軸旋轉(zhuǎn)。為此，CSS3新增三個(gè)旋轉(zhuǎn)函數(shù)：rotateX()、rotateY()和rotateZ()。

使用rotateX()函數(shù)允許一個(gè)元素圍繞X軸旋轉(zhuǎn)；rotateY()函數(shù)允許一個(gè)元素圍繞Y軸旋轉(zhuǎn)；最后rotateZ()函數(shù)允許一個(gè)元素圍繞Z軸旋轉(zhuǎn)。接下來(lái)我們簡(jiǎn)單的了解一下這三個(gè)旋轉(zhuǎn)函數(shù)。

rotateX()函數(shù)指定一個(gè)元素圍繞X軸旋轉(zhuǎn)，旋轉(zhuǎn)的量被定義為指定的角度；如果值為正值，元素圍繞X軸順時(shí)針旋轉(zhuǎn)；反之，如果值為負(fù)值，元素圍繞X軸逆時(shí)針旋轉(zhuǎn)。其基本語(yǔ)法如下：

rotateX(a)

其中a指的是一個(gè)旋轉(zhuǎn)角度值，其值可以是正值也可以是負(fù)值。

rotateY()函數(shù)指定一個(gè)元素圍繞Y軸旋轉(zhuǎn)，旋轉(zhuǎn)的量被定義為指定的角度；如果值為正值，元素圍繞Y軸順時(shí)針旋轉(zhuǎn)；反之，如果值為負(fù)值，元素圍繞Y軸逆時(shí)針旋轉(zhuǎn)。其基本語(yǔ)法如下：

rotateY(a)

其中a指的是一個(gè)旋轉(zhuǎn)角度值，其值可以是正值也可以是負(fù)值。

rotateZ()函數(shù)和其他兩個(gè)函數(shù)功能一樣的，區(qū)別在于rotateZ()函數(shù)指定一個(gè)元素圍繞Z軸旋轉(zhuǎn)。其基本語(yǔ)法如下：

rotateZ(a)

rotateZ()函數(shù)指定元素圍繞Z軸旋轉(zhuǎn)，如果僅從視覺角度上看，rotateZ()函數(shù)讓元素順時(shí)針或逆時(shí)針旋轉(zhuǎn)，并且效果和rotate()效果等同，但他不是在2D平面的旋轉(zhuǎn)。

在三維空間里，除了rotateX()、rotateY()和rotateZ()函數(shù)可以讓一個(gè)元素在三維空間中旋轉(zhuǎn)之外，還有一個(gè)屬性rotate3d()函數(shù)。在3D空間，旋轉(zhuǎn)有三個(gè)程度的自由來(lái)描述一個(gè)轉(zhuǎn)動(dòng)軸。軸的旋轉(zhuǎn)是由一個(gè)[x,y,z]向量并經(jīng)過(guò)元素原點(diǎn)。其基本語(yǔ)法如下：

rotate3d(x,y,z,a)

rotate3d()中取值說(shuō)明：

• x：是一個(gè)0到１之間的數(shù)值，主要用來(lái)描述元素圍繞X軸旋轉(zhuǎn)的矢量值；
• y：是一個(gè)０到１之間的數(shù)值，主要用來(lái)描述元素圍繞Y軸旋轉(zhuǎn)的矢量值；
• z：是一個(gè)０到１之間的數(shù)值，主要用來(lái)描述元素圍繞Z軸旋轉(zhuǎn)的矢量值；
• a：是一個(gè)角度值，主要用來(lái)指定元素在3D空間旋轉(zhuǎn)的角度，如果其值為正值，元素順時(shí)針旋轉(zhuǎn)，反之元素逆時(shí)針旋轉(zhuǎn)。

面介紹的三個(gè)旋轉(zhuǎn)函數(shù)功能等同：

• rotateX(a)函數(shù)功能等同于rotate3d(1,0,0,a)
• rotateY(a)函數(shù)功能等同于rotate3d(0,1,0,a)
• rotateZ(a)函數(shù)功能等同于rotate3d(0,0,1,a)

接下來(lái)通過(guò)一個(gè)簡(jiǎn)單的實(shí)例，來(lái)實(shí)戰(zhàn)一下3D旋轉(zhuǎn)的運(yùn)用：

HTML

<div class="stage s1">
    <div class="container">
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
    </div>
</div>
<div class="stage s2">
    <div class="container">
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
    </div>
</div>
<div class="stage s3">
    <div class="container">
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
    </div>
</div>
<div class="stage s4">
    <div class="container">
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www./sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
    </div>
</div>

CSS

.stage {
    width: 300px;
    height: 300px;
    float: left;
    margin: 15px;
    position: relative;
    background: url(http://www./sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;

    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
}
.container {
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.container img {
    position: absolute;
    margin-left: -70px;
    margin-top: -100px; 
}
.container img:nth-child(1){
    z-index: 1;
    opacity: .6;
}
.s1 img:nth-child(2){
    z-index: 2; 
    -webkit-transform:rotateX(45deg);
    -moz-transform:rotateX(45deg);
    -ms-transform:rotateX(45deg);
    -o-transform:rotateX(45deg);
    transform:rotateX(45deg);
}
.s2 img:nth-child(2){
    z-index: 2; 
    -webkit-transform:rotateY(45deg);
    -moz-transform:rotateY(45deg);
    -ms-transform:rotateY(45deg);
    -o-transform:rotateY(45deg);
    transform:rotateY(45deg);
}
.s3 img:nth-child(2){
    z-index: 2; 
    -webkit-transform:rotateZ(45deg);
    -moz-transform:rotateZ(45deg);
    -ms-transform:rotateZ(45deg);
    -o-transform:rotateZ(45deg);
    transform:rotateZ(45deg);
}
.s4 img:nth-child(2){
    z-index: 2; 
    -webkit-transform:rotate3d(.6,1,.6,45deg);
    -moz-transform:rotate3d(.6,1,.6,45deg);
    -ms-transform:rotate3d(.6,1,.6,45deg);
    -o-transform:rotate3d(.6,1,.6,45deg);
    transform:rotate3d(.6,1,.6,45deg);
}

效果如下所示：

 

CSS3 3D矩陣

CSS3中的3D矩陣要比2D中的矩陣復(fù)雜的多了，從二維到三維，是從４到９；而在矩陣?yán)镱^是3*3變成4*4，９到16了。話說(shuō)又說(shuō)回來(lái)，對(duì)于3D矩陣而言，本質(zhì)上很多東西都與2D一致的，只是復(fù)雜程度不一樣而已。

3D矩陣即為透視投影，推算方法與2D矩陣類似：

代碼表示就是：

matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)

CSS3 3D傾斜

傾斜是二維變形，不能在三維空間變形。元素可能會(huì)在X軸和Y軸傾斜，然后轉(zhuǎn)化為三維，但它們不能在Z軸傾斜。

CSS3 3D變形兼容性

3D變形在實(shí)際使用這時(shí)同樣需要添加各瀏覽器的私有屬性，并且有個(gè)別屬性在某些主流瀏覽器中并未得到很好的支持：

• IE10+中3D變形部分屬性未得到很好的支持；
• Firefox10.0至Firefox15.0版本的瀏覽器，在使用3D變形時(shí)需要添加私有屬性-moz-，但從Firefox16.0+版本開始無(wú)需添加瀏覽器私有屬性；
• Chrome12.0+版本中使用3D變形時(shí)需要添加私有屬性-webkit-；
• Safari4.0+版本中使用3D變形時(shí)需要添加私有屬性-webkit-；
• Opera15.0+版本才開始支持3D變形，使用之里需要添加私有屬性-webkit-；
• 移動(dòng)設(shè)備中iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+都支持3D變形，但在使用時(shí)需要添加私有屬性-webkit-；Firefox for Android19.0+支持3D變形，但無(wú)需添加瀏覽器私有屬性。

多重變形

在CSS3中，不管是2D變形還是3D變形，我們都可以使用多重變形，他們之間使用空格分隔，具體的語(yǔ)法如下：

transform: <transform-function>  <transform-function> *

其中transfrom-function是指CSS3中的任何變形函數(shù)。我們來(lái)看一個(gè)使用多重變形制作的立方體。先來(lái)看一個(gè)使用2D變形制作的立方體：

HTML

<div class="stage s1">
    <div class="container">
        <div class="side top">1</div>
        <div class="side left">2</div>
        <div class="side right">3</div>
    </div>
</div>

CSS

@-webkit-keyframes spin{
    0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
    100%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@-moz-keyframes spin{
    0%{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}
    100%{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@-ms-keyframes spin{        

    0%{-ms-transform:rotateY(0deg);transform:rotateY(0deg)}     100%{-ms-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@-o-keyframes spin{     

    0%{-o-transform:rotateY(0deg);transform:rotateY(0deg)}
    100%{-o-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@keyframes spin{
    0%{transform:rotateY(0deg)}
    100%{transform:rotateY(360deg)}
}
.stage {
    width: 300px;
    height: 300px;
    float: left;
    margin: 15px;
    position: relative;
    background: url(http://www./sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;

    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
}
.container {
    position: relative;
    height: 230px;
    width: 100px;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -50px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.container:hover{
    -moz-animation:spin 5s linear infinite;
    -o-animation:spin 5s linear infinite;
    -webkit-animation:spin 5s linear infinite;
    animation:spin 5s linear infinite;
}
.side {
    font-size: 20px;
    font-weight: bold;
    height: 100px;
    line-height: 100px;
    color: #fff;
    position: absolute;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    text-transform: uppercase;
    width: 100px;
}
.top {
    background: #9acc53;
    -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
    -moz-transform: rotate(-45deg) skew(15deg, 15deg);
    -ms-transform: rotate(-45deg) skew(15deg, 15deg);
    -o-transform: rotate(-45deg) skew(15deg, 15deg);
    transform: rotate(-45deg) skew(15deg, 15deg);
}
.left {
    background: #8ec63f;
    -webkit-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
    -moz-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
    -ms-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
    -o-transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
    transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
}
.right {
    background: #80b239;
    -webkit-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
    -moz-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
    -ms-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
    -o-transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
    transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
}

效果如下：

 

上例通過(guò)三個(gè)面，使用多個(gè)2D變形，制作的一個(gè)3D立方體，接著我們?cè)趤?lái)使用3D多重變形制作一個(gè)3D立方體。

HTML

<div class="stage">
    <div class="container">
        <div class="side front">1</div>
        <div class="side back">2</div>
        <div class="side left">3</div>
        <div class="side right">4</div>
        <div class="side top">5</div>
        <div class="side bottom">6</div>
    </div>
</div>

CSS

@-webkit-keyframes spin{
     0%{
         -webkit-transform:rotateY(0deg);
         transform:rotateY(0deg)
       }
      100%{
        -webkit-transform:rotateY(360deg);
        transform:rotateY(360deg)
      }
    }
    @-moz-keyframes spin{
        0%{
            -moz-transform:rotateY(0deg);
            transform:rotateY(0deg)
        }
        100%{
            -moz-transform:rotateY(360deg);
            transform:rotateY(360deg)
        }
    }
    @-ms-keyframes spin{
        0%{
            -ms-transform:rotateY(0deg);
            transform:rotateY(0deg)
        }
        100%{
            -ms-transform:rotateY(360deg);
            transform:rotateY(360deg)
        }
    }
    @-o-keyframes spin{
        0%{
            -o-transform:rotateY(0deg);
            transform:rotateY(0deg)
        }
        100%{
            -o-transform:rotateY(360deg);
            transform:rotateY(360deg)
        }
    }
    @keyframes spin{
        0%{transform:rotateY(0deg)}
        100%{transform:rotateY(360deg)}
    }
    .stage {
        width: 300px;
        height: 300px;
        margin: 15px auto;
        position: relative;
        background: url(http://www./sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;

        -webkit-perspective: 300px;
        -moz-perspective: 300px;
        -ms-perspective: 300px;
        -o-perspective: 300px;
        perspective: 300px;
    }
    .container {
        top: 50%;
        left: 50%;
        margin: -100px 0 0 -100px;
        position: absolute;
        -webkit-transform: translateZ(-100px);
        -moz-transform: translateZ(-100px);
        -ms-transform: translateZ(-100px);
        -o-transform: translateZ(-100px);
        transform: translateZ(-100px);
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .container:hover{
        -moz-animation:spin 5s linear infinite;
        -o-animation:spin 5s linear infinite;
        -webkit-animation:spin 5s linear infinite;
        animation:spin 5s linear infinite;
    }
    .side {
        background: rgba(142,198,63,0.3);
        border: 2px solid #8ec63f;
        font-size: 60px;
        font-weight: bold;
        color: #fff;
        height: 196px;
        line-height: 196px;
        position: absolute;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
        text-transform: uppercase;
        width: 196px;
    }

    .front {
        -webkit-transform: translateZ(100px);
        -moz-transform: translateZ(100px);
        -ms-transform: translateZ(100px);
        -o-transform: translateZ(100px);
        transform: translateZ(100px);
    }
    .back {
        -webkit-transform: rotateX(180deg) translateZ(100px);
        -moz-transform: rotateX(180deg) translateZ(100px);
        -ms-transform: rotateX(180deg) translateZ(100px);
        -o-transform: rotateX(180deg) translateZ(100px);
        transform: rotateX(180deg) translateZ(100px);
    }
    .left {
        -webkit-transform: rotateY(-90deg) translateZ(100px);
        -moz-transform: rotateY(-90deg) translateZ(100px);
        -ms-transform: rotateY(-90deg) translateZ(100px);
        -o-transform: rotateY(-90deg) translateZ(100px);
        transform: rotateY(-90deg) translateZ(100px);
    }
    .right {
        -webkit-transform: rotateY(90deg) translateZ(100px);
        -moz-transform: rotateY(90deg) translateZ(100px);
        -ms-transform: rotateY(90deg) translateZ(100px);
        -o-transform: rotateY(90deg) translateZ(100px);
        transform: rotateY(90deg) translateZ(100px);
    }
    .top {
        -webkit-transform: rotateX(90deg) translateZ(100px);
        -moz-transform: rotateX(90deg) translateZ(100px);
        -ms-transform: rotateX(90deg) translateZ(100px);
        -o-transform: rotateX(90deg) translateZ(100px);
        transform: rotateX(90deg) translateZ(100px);
    }
    .bottom {
        -webkit-transform: rotateX(-90deg) translateZ(100px);
        -moz-transform: rotateX(-90deg) translateZ(100px);
        -ms-transform: rotateX(-90deg) translateZ(100px);
        -o-transform: rotateX(-90deg) translateZ(100px);
        transform: rotateX(-90deg) translateZ(100px);
    }

效果如下所示：

 

案例實(shí)戰(zhàn)：使用3D變形制作產(chǎn)品信息展示

在Web設(shè)計(jì)中有很多方法用來(lái)制作產(chǎn)品信息展示，例如當(dāng)鼠標(biāo)移動(dòng)到產(chǎn)品圖片上時(shí)，產(chǎn)品信息滑動(dòng)出來(lái)甚至使用彈出框。在這里，我們將使用CSS3 3D變形來(lái)制作一個(gè)3D立方體翻轉(zhuǎn)展示信息的效果。

在談?wù)摷夹g(shù)之前，我們先來(lái)看要實(shí)現(xiàn)的效果（如下圖）。默認(rèn)情況之下只顯示產(chǎn)品圖片，而產(chǎn)品信息隱藏不可見。當(dāng)用戶鼠標(biāo)懸浮在產(chǎn)品圖像上時(shí)，產(chǎn)品圖像慢慢往上旋轉(zhuǎn)使產(chǎn)品信息展示出來(lái)，而產(chǎn)品圖像慢慢隱藏起來(lái)，看起來(lái)就像是一個(gè)旋轉(zhuǎn)的立方體。

該技術(shù)用于創(chuàng)建一個(gè)多維的數(shù)據(jù)，在這個(gè)實(shí)例中使用了兩個(gè)元素用于正面和反面。前面用來(lái)放置產(chǎn)品圖片，底部用來(lái)放置產(chǎn)品信息。默認(rèn)情況下產(chǎn)品信息隱藏起來(lái)，同時(shí)鼠標(biāo)懸停在產(chǎn)品圖片上時(shí)，隱藏在底部的產(chǎn)品信息在X軸放置-90度和Z軸旋轉(zhuǎn)，使底部的信息旋轉(zhuǎn)置于頂部，從而達(dá)到我們需要的效果，產(chǎn)品圖片隱藏，產(chǎn)品信息顯示。如圖所示：

使用兩個(gè)標(biāo)簽包裹產(chǎn)品圖片和產(chǎn)品信息，第一個(gè)主要用來(lái)設(shè)置3D視點(diǎn)perspective，旨在設(shè)置用戶有畫布的視距；第二個(gè)包裹容器主要用來(lái)包裹圖片和產(chǎn)品信息。當(dāng)鼠標(biāo)懸浮在這個(gè)容器上時(shí)，會(huì)沿X軸旋轉(zhuǎn)，將產(chǎn)品信息顯示出來(lái)。在三維旋轉(zhuǎn)中，我們常的一種結(jié)構(gòu)：

舞臺(tái)=>div.wrapper
    容器=>div.item
        產(chǎn)品圖片＝>img
        產(chǎn)品信息=>span.information

在我們的實(shí)例中使用的結(jié)構(gòu)是：

<div class="wrapper">
      <div class="item">
        <img src="images/contact.png" />
        <span class="information">
          <strong>Contact Form</strong> The easiest way to add a contact form to your shop.
        </span>
      </div>
    </div>

接下來(lái)完成這個(gè)實(shí)例的樣式。首先給每個(gè)wrapper容器設(shè)置display:inline-block和perspective：4000px，同時(shí)給item設(shè)置transform-style:preserve-3d讓他的子元素具有一個(gè)3D位置。并且為了效果能更加完美，在例中添加了CSS3的transition屬性：

.wrapper {
    display: inline-block;
    width: 310px;
    height: 100px;
    vertical-align: top;
    margin: 1em 1.5em 2em 0;
    cursor: pointer;
    position: relative;
    font-family: Tahoma, Arial;
    -webkit-perspective: 4000px;
       -moz-perspective: 4000px;
        -ms-perspective: 4000px;
         -o-perspective: 4000px;
            perspective: 4000px;
  }

  .item {
    height: 100px;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform .6s;
         -moz-transition: -moz-transform .6s;
          -ms-transition: -ms-transform .6s;
           -o-transition: -o-transform .6s;
              transition: transform .6s;
  }

接下來(lái)給產(chǎn)品圖片設(shè)置一個(gè)Z軸位移，給產(chǎn)品信息設(shè)置一個(gè)X軸旋轉(zhuǎn)和Z軸位移，為了效果更加完美，還添加了一些其他的裝飾樣式：

.item img {
  display: block;
  position: absolute;
  top: 0;
  border-radius: 3px;
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  -webkit-transform: translateZ(50px);
     -moz-transform: translateZ(50px);
      -ms-transform: translateZ(50px);
       -o-transform: translateZ(50px);
          transform: translateZ(50px);
  -webkit-transition: all .6s;
     -moz-transition: all .6s;
      -ms-transition: all .6s;
       -o-transition: all .6s;
          transition: all .6s;
}
.item .information {
  display: block;
  position: absolute;
  top: 0;
  height: 80px;
  width: 290px;
  text-align: left;
  border-radius: 15px;
  padding: 10px;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  box-shadow: none;
  background: rgb(236,241,244);
  background: -webkit-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
  background: -ms-linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
  background: linear-gradient(to bottom,  rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
     -moz-transform: rotateX(-90deg) translateZ(50px);
      -ms-transform: rotateX(-90deg) translateZ(50px);
       -o-transform: rotateX(-90deg) translateZ(50px);
          transform: rotateX(-90deg) translateZ(50px);
  -webkit-transition: all .6s;
     -moz-transition: all .6s;
      -ms-transition: all .6s;
       -o-transition: all .6s;
          transition: all .6s;
}

最后來(lái)完成用戶鼠標(biāo)懸浮在產(chǎn)品圖片上時(shí)，旋轉(zhuǎn)隱藏產(chǎn)品圖片，同時(shí)產(chǎn)品信息旋轉(zhuǎn)顯示出來(lái)：

.item:hover {
  -webkit-transform: translateZ(-50px) rotateX(95deg);
     -moz-transform: translateZ(-50px) rotateX(95deg);
      -ms-transform: translateZ(-50px) rotateX(95deg);
       -o-transform: translateZ(-50px) rotateX(95deg);
          transform: translateZ(-50px) rotateX(95deg);
}

  .item:hover img {
    box-shadow: none;
    border-radius: 15px;
  }

  .item:hover .information {
    box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
    border-radius: 3px;
  }

到此整個(gè)實(shí)例的效果就全部完成了，由于篇幅問題，這里不展示所有代碼，如果您對(duì)這個(gè)實(shí)例感興趣，可以點(diǎn)擊DEMO或下載源碼自己分析