CSS3 3D Transform
三維變換使用基於二維變換的相同屬性，若是您熟悉二維變換，大家發現3D變形的功能和2D變換的功能至關相似。CSS3中的3D變換主要包括如下幾種功能函數：css
- 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()函數使一個元素在三維空間移動。這種變形的特色是，使用三維向量的座標定義元素在每一個方向移動多少。其基本語法以下：web
translate3d(tx,ty,tz)
其屬性值取值說明以下：函數
- tx：表明橫向座標位移向量的長度；
- ty：表明縱向座標位移向量的長度；
- tz：表明Z軸位移向量的長度。此值不能是一個百分比值，若是取值爲百分比值，將會認爲無效值。
一塊兒來看一個簡單的實例，加深對translate3d()函數的理解：url
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);
}
效果以下所示：spa
從上圖的效果能夠看出，當z軸值越大時，元素也離觀看者更近，從視覺上元素就變得更大；反之其值越小時，元素也離觀看者更遠，從視覺上元素就變得更小。3d
在CSS3中3D位移除了translate3d()函數以外還有translateZ()函數。translateZ()函數的功能是讓元素在3D空間沿Z軸進行位移，其基本使用語法以下：code
translate(t)
取值說明以下：orm
- t：指的是Z軸的向量位移長度。
使用translateZ()函數可讓元素在Z軸進行位移，當其值爲負值時，元素在Z軸越移越遠，致使元素變得較小。反之，當其值爲正值時，元素在Z軸越移越近，致使元素變得較大。在上例的基礎上，咱們稍加變化一下，將translate3d()函數換成translateZ()函數：blog
.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);
}
效果以下：ci
效果再次證實了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);
}
效果以下所示：
- 1. CSS3 3D Transform
- 2. css3 3D transform
- 3. 3D變形(CSS3) transform
- 4. css3 transform 3d詳解
- 5. CSS3 Transform變形（3D轉換）
- 6. CSS3 Transform——transform-origin（轉）
- 7. CSS3——transform
- 8. CSS3 3D Transform perspective 以及scale3d記錄
- 9. css3 transform 2d
- 10. CSS3-transform-style
- 更多相關文章...
- • jQuery Mobile 過渡 - jQuery Mobile 教程
- • ASP.NET BorderStyle 屬性 - ASP.NET 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西