3d變形(css3) transform
translatex(x)
transform是css3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、傾斜、縮放，甚至支援矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠flash才可以實現的效果。
變形轉換 transform transform 變換 變形的意思 《 transformers 變形金剛》
translate 移動平移的意思
translate
(50px,50px)
;
可以改變元素的位置，x、y可為負值；
translate(x,y)水平方向和垂直方向同時移動（也就是x軸和y軸同時移動）
translatex(x)僅水平方向移動（x軸移動）
translatey(y)僅垂直方向移動（y軸移動）
.box
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-ucvgtlsm-1586003415812)(media/1498444645795.png)]
transform
:scale
(0.8,1)
;
scale(x,y)使元素水平方向和垂直方向同時縮放（也就是x軸和y軸同時縮放）
scalex(x)元素僅水平方向縮放（x軸縮放）
scaley(y)元素僅垂直方向縮放（y軸縮放）
可以對元素進行旋轉，正值為順時針，負值為逆時針；
transform
:rotate
(45deg)
;
div
/* 改變元素原點到左上角，然後進行順時旋轉45度 */
div
/* 改變元素原點到x 為10 y 為10，然後進行順時旋轉45度 */
div
div img
div:hover img:nth-child(1)
div:hover img:nth-child(2)
div:hover img:nth-child(3)
div:hover img:nth-child(4)
div:hover img:nth-child(5)
div:hover img:nth-child(6)
transform
:skew
(30deg,0deg)
;
可以使元素按一定的角度進行傾斜，可為負值，第二個引數不寫預設為0。
2d x y
3d x y z
左手座標系
伸出左手，讓拇指和食指成「l」形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了乙個左手座標系，拇指、食指和中指分別代表x、y、z軸的正方向。如下圖
css3中的3d座標系與上述的3d座標系是有一定區別的，相當於其繞著x軸旋轉了180度，如下圖
[簡單記住他們的座標：
x左邊是負的，右邊是正的
y 上面是負的， 下面是正的
z 裡面是負的， 外面是正的
就是沿著 x 立體旋轉.
img
img:hove
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-w73pctgw-1586003415818)(media/1498446043198.png)]
img
img:hove
img
img:hover
透視可以將乙個2d平面，在轉換的過程當中，呈現3d效果。
注：並非任何情況下需要透視效果，根據開發需要進行設定。
perspective 一般作為乙個屬性，設定給父元素，作用於所有3d轉換的子元素
僅水平方向移動**（x軸移動）
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-sc2ikw2i-1586003415819)(media/1498459697576.png)]
主要目的實現移動效果
僅垂直方向移動（y軸移動）
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-o6sin3yd-1586003415820)(media/1498459770252.png)]
transformz的直觀表現形式就是大小變化，實質是xy平面相對於視點的遠近變化（說遠近就一定會說到離什麼參照物遠或近，在這裡參照物就是perspective屬性）。比如設定了perspective為200px;那麼transformz的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，因為相當於跑到後腦勺去了，我相信你正常情況下，是看不到自己的後腦勺的。
[注意]其中，x和y可以是長度值，也可以是百分比，百分比是相對於其本身元素水平方向的寬度和垂直方向的高度和；z只能設定長度值
body
.door
.door > div
.left
.left::before
.right
.right::before
.door:hover .left
.door:hover .right
div
div img
div img:first-child
div:hover img
css3的2D和3D效果
2d效果 1.css3過渡，讓動畫更柔和，transition ie10 firefox chrome opera支援，chrome25以及更早版本safari需要新增 webkit transition width 0.5s ease 1s delay transition all 0.5s 常用...
CSS3屬性（過渡，2D變換，3D變換，動畫）
在css3中，我們如果不使用js 或者flash動畫，想要實現元素從a狀態變成b狀態，並且中間的過程可以被觀察到，那麼可以使用過渡屬性 transitiont ease 由快到慢 預設值 linear 勻速運動 ease in 加速運動 ease out 減速運動 ease in out 先加速後減...
CSS3的2D轉換和3D轉換
rotate 使用transform元素中的rotate方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform rotate 11deg ms transform rotate 11deg internet explorer moz transform rotate 11de...