http://www.w3cplus.com/css3/css3-3d-transform.html

爲一個網頁設計師，你可能熟悉在二維空間工作，但是在三維空間上工作並不太熟悉。使用二維變形我們能夠改變元素在水平和垂直軸線，然而還有一個軸沿着它，我們可以改變元素。使用三維變形，我們可以改變元素在Z軸位置。

三維變換使用基於二維變換的相同屬性，如果您熟悉二維變換，你們發現3D變形的功能和2D變換的功能相當類似。CSS3中的3D變換主要包括以下幾種功能函數：

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

CSS3 3D位移

在CSS3中3D位移主要包括兩種函數translateZ()和translate3d()。translate3d()函數使一個元素在三維空間移動。這種變形的特點是，使用三維向量的座標定義元素在每個方向移動多少。其基本語法如下：

translate3d(tx,ty,tz)

其屬性值取值說明如下：

tx：代表橫向座標位移向量的長度；
ty：代表縱向座標位移向量的長度；
tz：代表Z軸位移向量的長度。此值不能是一個百分比值，如果取值爲百分比值，將會認爲無效值。

一起來看一個簡單的實例，加深對translate3d()函數的理解：

HTML

<div class="stage s1">
    <div class="container">
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
        <img src="http://www.w3cplus.com/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.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />
        <img src="http://www.w3cplus.com/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.w3cplus.com/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);
}

效果如下所示：

從上圖的效果可以看出，當z軸值越大時，元素也離觀看者更近，從視覺上元素就變得更大；反之其值越小時，元素也離觀看者更遠，從視覺上元素就變得更小。

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

translate(t)

取值說明如下：

t：指的是Z軸的向量位移長度。

使用translateZ()函數可以讓元素在Z軸進行位移，當其值爲負值時，元素在Z軸越移越遠，導致元素變得較小。反之，當其值爲正值時，元素在Z軸越移越近，導致元素變得較大。在上例的基礎上，我們稍加變化一下，將translate3d()函數換成translateZ()函數：

.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()函數僅讓元素在Z軸進行位移，當其值越大時，元素離觀看者越近，視覺上元素放大，反之元素縮小。

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

CSS3 3D縮放

CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數，當scale3d()中X軸和Y軸同時爲1，即scale3d(1,1,sz)，其效果等同於scaleZ(sz)。通過使用3D縮放函數，可以讓元素在Z軸上按比例縮放。默認值爲１，當值大於１時，元素放大，反之小於１大於0.01時，元素縮小。其使用語法如下：

scale3d(sx,sy,sz)

其取值說明如下：

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

scaleZ(s)

其取值說明如下：

s：指定元素每個點在Z軸的比例。

scaleZ(-1)定義了一個原點在Z軸的對稱點（按照元素的變換原點）。

scaleZ()和scale3d()函數單獨使用時沒有任何效果，需要配合其他的變形函數一起使用纔會有效果。下面我們來看一個實例，爲了能看到scaleZ()函數的效果，我們添加了一個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旋轉

到目前爲止，我們已經討論瞭如何讓一個元素在平面上進行順時針或逆時針旋轉。在三維變形中，我們可以讓元素在任何軸旋轉。爲此，CSS3新增三個旋轉函數：rotateX()、rotateY()和rotateZ()。

使用rotateX()函數允許一個元素圍繞X軸旋轉；rotateY()函數允許一個元素圍繞Y軸旋轉；最後rotateZ()函數允許一個元素圍繞Z軸旋轉。接下來我們簡單的瞭解一下這三個旋轉函數。

rotateX()函數指定一個元素圍繞X軸旋轉，旋轉的量被定義爲指定的角度；如果值爲正值，元素圍繞X軸順時針旋轉；反之，如果值爲負值，元素圍繞X軸逆時針旋轉。其基本語法如下：

rotateX(a)

其中a指的是一個旋轉角度值，其值可以是正值也可以是負值。

rotateY()函數指定一個元素圍繞Y軸旋轉，旋轉的量被定義爲指定的角度；如果值爲正值，元素圍繞Y軸順時針旋轉；反之，如果值爲負值，元素圍繞Y軸逆時針旋轉。其基本語法如下：

rotateY(a)

其中a指的是一個旋轉角度值，其值可以是正值也可以是負值。

rotateZ()函數和其他兩個函數功能一樣的，區別在於rotateZ()函數指定一個元素圍繞Z軸旋轉。其基本語法如下：

rotateZ(a)

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

在三維空間裏，除了rotateX()、rotateY()和rotateZ()函數可以讓一個元素在三維空間中旋轉之外，還有一個屬性rotate3d()函數。在3D空間，旋轉有三個程度的自由來描述一個轉動軸。軸的旋轉是由一個[x,y,z]向量並經過元素原點。其基本語法如下：

rotate3d(x,y,z,a)

rotate3d()中取值說明：

x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值爲正值，元素順時針旋轉，反之元素逆時針旋轉。

面介紹的三個旋轉函數功能等同：

rotateX(a)函數功能等同於rotate3d(1,0,0,a)
rotateY(a)函數功能等同於rotate3d(0,1,0,a)
rotateZ(a)函數功能等同於rotate3d(0,0,1,a)

接下來通過一個簡單的實例，來實戰一下3D旋轉的運用：

HTML

<div class="stage s1">
    <div class="container">
        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www.w3cplus.com/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.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www.w3cplus.com/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.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www.w3cplus.com/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.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="140" height="200" />
        <img src="http://www.w3cplus.com/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.w3cplus.com/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中的矩陣複雜的多了，從二維到三維，是從４到９；而在矩陣裏頭是3*3變成4*4，９到16了。話說又說回來，對於3D矩陣而言，本質上很多東西都與2D一致的，只是複雜程度不一樣而已。

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

代碼表示就是：

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

CSS3 3D傾斜

傾斜是二維變形，不能在三維空間變形。元素可能會在X軸和Y軸傾斜，然後轉化爲三維，但它們不能在Z軸傾斜。

CSS3 3D變形兼容性

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

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

多重變形

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

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

其中transfrom-function是指CSS3中的任何變形函數。我們來看一個使用多重變形制作的立方體。先來看一個使用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.w3cplus.com/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%);
}

效果如下：

上例通過三個面，使用多個2D變形，製作的一個3D立方體，接着我們在來使用3D多重變形制作一個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.w3cplus.com/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);
    }

效果如下所示：

案例實戰：使用3D變形制作產品信息展示

在Web設計中有很多方法用來製作產品信息展示，例如當鼠標移動到產品圖片上時，產品信息滑動出來甚至使用彈出框。在這裏，我們將使用CSS3 3D變形來製作一個3D立方體翻轉展示信息的效果。

在談論技術之前，我們先來看要實現的效果（如下圖）。默認情況之下只顯示產品圖片，而產品信息隱藏不可見。當用戶鼠標懸浮在產品圖像上時，產品圖像慢慢往上旋轉使產品信息展示出來，而產品圖像慢慢隱藏起來，看起來就像是一個旋轉的立方體。

該技術用於創建一個多維的數據，在這個實例中使用了兩個元素用於正面和反面。前面用來放置產品圖片，底部用來放置產品信息。默認情況下產品信息隱藏起來，同時鼠標懸停在產品圖片上時，隱藏在底部的產品信息在X軸放置-90度和Z軸旋轉，使底部的信息旋轉置於頂部，從而達到我們需要的效果，產品圖片隱藏，產品信息顯示。如圖所示：

使用兩個標籤包裹產品圖片和產品信息，第一個主要用來設置3D視點perspective，旨在設置用戶有畫布的視距；第二個包裹容器主要用來包裹圖片和產品信息。當鼠標懸浮在這個容器上時，會沿X軸旋轉，將產品信息顯示出來。在三維旋轉中，我們常的一種結構：

舞臺=>div.wrapper
    容器=>div.item
        產品圖片＝>img
        產品信息=>span.information

在我們的實例中使用的結構是：

<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>

接下來完成這個實例的樣式。首先給每個wrapper容器設置display:inline-block和perspective：4000px，同時給item設置transform-style:preserve-3d讓他的子元素具有一個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;
  }

接下來給產品圖片設置一個Z軸位移，給產品信息設置一個X軸旋轉和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;
}

最後來完成用戶鼠標懸浮在產品圖片上時，旋轉隱藏產品圖片，同時產品信息旋轉顯示出來：

.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;
  }

到此整個實例的效果就全部完成了，由於篇幅問題，這裏不展示所有代碼，如果您對這個實例感興趣，可以點擊DEMO或下載源碼自己分析。

demo download

特別聲明：此案例來自於Webstuffshare.com的Showing Product Information With CSS3 3D Transform

總結

本文主要向大家介紹了3D空間的3D旋轉、3D位移、3D縮放和3D矩陣函數功能以及應用場景。讓大家對3D　Transform有一個初步的瞭解，並能根據這些基礎知識製作出自己需要的效果。

通過這幾個部分的學習：

在這幾篇文章中，主要分兩個部分介紹了CSS3中的變形屬性，第一部分是二維空間的變形，第二部分是三維空間的變形。二維空間中的變形主要向大家介紹了旋轉rotate()、傾斜skew()、位移translate()、縮放scale()和2D矩陣等函數功能。三維空間的變形主要向大家介紹了3D空間的幾個重要概念，比如perspective、perspective-origin和backface-visibility等，以及詳細介紹了3D空間中的3D旋轉、3D位移、3D縮放和3D矩陣。通過本章節的學習，大家對CSS3的變形會有一個較深的瞭解

http://www.w3cplus.com/css3/css3-3d-transform.html

CSS3 3D位移

HTML

CSS

CSS3 3D縮放

CSS3 3D旋轉

HTML

CSS

CSS3 3D矩陣

CSS3 3D傾斜

CSS3 3D變形兼容性

多重變形

HTML

CSS

HTML

CSS

案例實戰：使用3D變形制作產品信息展示

總結

釘釘打卡速度慢

Nginx R31 doc 官方文檔-01-nginx 如何安裝

Python 潮流週刊#51：用 Python 繪製美觀的圖表

Qt/C++音視頻開發74-合併標籤圖形/生成yolo運算結果圖形/文字和圖形合併成一個/水印濾鏡

挑戰程序設計競賽 2.2章習題 POJ - 3617 Best Cow Line 貪心

字節面試：MySQL什麼時候鎖表？如何防止鎖表？

.NET8連接SQL SERVER 2008 R2 報：證書鏈是由不受信任的頒發機構頒發的

golang開發環境搭建(win10)

python計算機視覺學習筆記——PIL庫的用法

Golang初學：獲取程序內存使用情況，std runtime

JEECGBOOT 補丁：導入數據庫，備註沒有同時導入，默認了英文，執行下面的腳本即可修改爲備註

JEECGBOOT-如何提高導入批量插入效率的幾點建議

git cherry pick

Vue 打包過大處理，gzip_static 提高訪問效率

http://www.w3cplus.com/css3/css3-3d-transform.html

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結