2D和3D
CSS3 transform 2D轉換的屬性與方法：
1.translate 平移
2.rotate 旋轉
3.scale 縮放
4.skew 扭曲
還有一個屬性就是transform-origin 從哪個方向改變被轉換元素的位置
因為是css屬性，所以必然，2d轉化的設定在style中設定基本格式，transform：XXX；以選擇哪種轉化，還可以設定transition：time；以設定轉化時間（不過不能設定在初始狀態下，否則無效）
1.translate
通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置引數：
2.rotate
通過 rotate() 方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。
rotate可以設定transform-origin可以設定旋轉點的位置。
rotateX和rotateY有點意思，他們是關於x，y軸旋轉。
3.sclae
transform：scale（a，b）將元素沿x，y方向放大a，b倍，transform：scale（a）與transform：scale（a，a）一致
4.skew
t通過 skew() 方法，元素翻轉給定的角度，根據給定的水平線（X 軸）和垂直線（Y 軸）。我試著設定了一下transform-origin但是效果僅是變化後元素會突然平移，效果很差，這個特性一般應該沒用。
程式碼：通過div從不同的角度進行以上四種方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 8 <title>Document</title> 9 10 <style> 11 .box {12 width: 850px; 13 height: 220px; 14 border: 1px solid; 15 margin: 200px auto; 16 } 17 18 .box>div { 19 float: left; 20 width: 200px; 21 height: 200px; 22 margin-top: 10px; 23 margin-left: 10px; 24 background-color: #0f0; 25 text-align: center; 26 line-height: 200PX; 27 } 28 /* 旋轉 引數是角度 */ 29 .box>div:nth-child(1):hover { 30 /* 未說明是哪條軸，預設X軸旋轉 */ 31 /* transform: rotate(45deg); */ 32 /* 沿著X軸旋轉 */ 33 /* transform: rotateX(45deg); */ 34 /* 沿著Y軸旋轉 */ 35 transform: rotateY(45deg); 36 background-color: red; 37 } 38 /* 平移 */ 39 40 .box>div:nth-child(2):hover { 41 /* 如果只給一個引數 預設沿著x軸平移 */ 42 /* transform: translate(100px); */ 43 /* transform: translateX(-100px); */ 44 /* transform: translateY(100px); */ 45 /* 沿著z軸方向的平移距離 沿著y軸方向的平移距離 如果只想沿著y軸移動，引數1給0*/ 46 transform: translate(100px, 100px); 47 background-color: red; 48 } 49 /* 縮放 */ 50 51 .box>div:nth-child(3):hover { 52 /* 只傳一個引數 表示寬高同時進行縮放 */ 53 /* transform: scale(1.4); */ 54 /* transform: scaleX(0.5); */ 55 /* transform: scaleY(1.2); */ 56 /* 串聯個引數分別表示寬的縮放倍數和高的縮放倍數 */ 57 transform: scale(0.2, 1.2); 58 background-color: red; 59 } 60 /* 扭曲 */ 61 62 .box>div:nth-child(4):hover { 63 /* transform: skew(45deg); */ 64 /* transform: skewX(45deg); */ 65 transform: skewY(45deg); 66 background-color: red; 67 } 68 </style> 69 </head> 70 71 <body> 72 <div class="box"> 73 <div class="top">旋轉</div> 74 <div class="center">平移</div> 75 <div class="nav">縮放</div> 76 <div class="bottom">扭曲</div> 77 </div> 78 </body> 79 80 </html>
3D（3D座標系相比2D座標系多了一個Z軸，Z軸的正方向為垂直螢幕向外（朝向使用者眼睛的方向）。）
transform-style：3d空間顯示
perspective：3d視距，配合3D使用
backface-visibility：定義元素在不面對螢幕時是否可見。
透視(perspective)，類似攝像頭，通常它的視距是800px
電腦顯示屏是一個2D平面，影象之所以具有立體感（3D效果），其實只是一種視覺呈現，通過透視可以實現此目的。
透視可以將一個2D平面，在轉換的過程當中，呈現3D效果。
- 透視原理： 近大遠小 。
- 瀏覽器透視：把近大遠小的所有影象，透視在螢幕上。
- perspective：視距，表示視點距離螢幕的長短。視點，用於模擬透視效果時人眼的位置
注：並非任何情況下需要透視效果，根據開發需要進行設定。
perspective 一般作為一個屬性，設定給父元素，作用於所有3D轉換的子元素
rotate
rotateX() : 就是沿著 x 立體旋轉.
rotateY()：沿著y軸進行旋轉
rotateZ()：沿著z軸進行旋轉
移動translate
translate3d(x,y,z)
[注意]其中，x和y可以是長度值，也可以是百分比，百分比是相對於其本身元素水平方向的寬度和垂直方向的高度和；z只能設定長度值
卡牌翻轉
//1、首先我們建立了一個“燈光”persepctive用來產生3D變化的效果的 //2、然後我們建立了一個“舞臺” transform-style: preserve-3d //3、建立“演員”，這裡的演員指的是每張的圖片，在建立的時候要根據你最終要呈現的形態進行建模，也即是平移旋轉之類的操作 css html,body{ background:#ff9f96; } .zf{ width: 300px; height: 300px; margin:200px auto; perspective:800px; } .bigbox{ width:300px; height:300px; position:relative; transform-style:preserve-3d;/*把bigbox變為3D空間*/ transition:transform 1s; } .xiaobox1{ backface-visibility:hidden;/*這行程式碼是xiaobox1設定為背面隱藏*/ width:300px; height:300px; position:absolute; background:url(../img/dome061.jpg); background-size:650px 300px; transform:rotateY(180deg);/*讓xiaobox1原地旋轉180度*/ } .xiaobox2{ backface-visibility:hidden; width:300px; height:300px; position:absolute; background:url(../img/dome062.jpg); background-size:650px 300px; } //正反兩面都要進行翻轉，所以hover效果要放在整體的盒子上 .bigbox:hover{ transform:rotateY(180deg);/*滑鼠移到bigbox上他原地旋轉180度*/ } <div class="zf"> <div class="bigbox"> <div class="xiaobox1"></div> <div class="xiaobox2"></div> </div> </div>