深入理解 CSS變形 transform(3d)

標籤：nbsp   存在   ace   應用   等價   技術   code   bottom   style   

座標軸

在瞭解透視之前，首先要先瞭解座標軸。3D變形與2D變形最大的不同就在於其參考的座標軸不同。2D變形的座標軸是平面的，只存在x軸和y軸，而3D變形的座標軸則是x、y、z三條軸組成的立體空間，x軸正向、y軸正向、z軸正向分別朝向右、下和螢幕外

<!-- 在本身元素上設定透視無效果 --><div style="float:left;margin-right: 10px;border:2px solid gray;">    <div style="perspective: 200px;width: 100px;height: 100px;border:1px solid black;transform: rotateX(45deg);"></div></div><!-- 在父級元素上設定透視有效果 --><div style="perspective: 200px; float:left;margin-right: 10px;border:2px solid gray;">    <div style="width: 100px;height: 100px;border:1px solid black;transform: rotateX(45deg);"></div></div>

 

perspective-origin

　　值: x軸 y軸

　　初始值: 50% 50%

　　應用於: 非inline元素(包括block、inline-block、table、table-cell等)

x軸    left: 0% center: 50% right: 100%y軸    top: 0% center: 50% bottom: 100%

矩陣matrix3d

　　3d變形函數位移、旋轉和縮放都是通過矩陣設定不同的參數而實現的。相比於2d矩陣martrix()的6個參數而言，3d矩陣matrix3d卻有12個參數。其變形規則與2dmatrix()類似，只不過是從3*3矩陣，變成了4*4矩陣

matrix3d(a,b,c,0,d,e,f,0,g,h,i,0,j,k,l,1)

 

3d位移

　　3d位移函數主要包括traslateZ()和translate3d()

translate3d(x,y,z)

　　[注意]其中，x和y可以是長度值，也可以是百分比，百分比是相對於其本身元素水平方向的寬度和垂直方向的高度和；z只能設定長度值

3d縮放

　　3d縮放函數主要包括scaleZ()和scale3d()

scale3d(x,y,z)

　　預設值為scale3d(1,1,1)，當參數為負值時，先翻轉再縮放

scaleZ(z)相當於scale3d(1,1,z)

　　[注意]3d位移函數相當於matrix3d(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

　　[注意]scaleZ()和scale3d()單獨使用時沒有任何效果

.box1 .in{    transform: translateZ(-500px);}.box2 .in{    transform: translateZ(-100px);}.box3 .in{    transform: scaleZ(5) translateZ(-100px);}

//中從左至右分別是box1,box2,box3。由此得知，box3也相當於向z軸移動了-500px

　　所以transform: scaleZ(5) translateZ(-100px)和transform: translateZ(-500px)是等價的

3d旋轉

　　3d旋轉函數主要包括rotateX()、rotateY()、rotateZ()、rotate3d()

rotate3d(x,y,z,Ndeg)

　　x、y、z分別用來描述圍繞x、y、z軸旋轉的向量值。最終變形元素沿著由(0,0,0)和(x,y,z)這兩個點構成的直線為軸，進行旋轉。當N為正數時，元素進行順時針旋轉；當N為負數時，元素進行逆時針旋轉

　　[注意]safari瀏覽器不支援keyframes中改變rotate3d()

rotateX(Ndeg)相當於rotate3d(1,0,0,Ndeg)

rotateY(Ndeg)相當於rotate3d(0,1,0,Ndeg)

rotateZ(Ndeg)相當於rotate3d(0,0,1,Ndeg)

 

背景可見

　　元素的背面預設是可見的。但有時需要讓元素背面不可見，這就要用到屬性backface-visibility

backface-visibility: 設定元素背面是否可見

visible:可見，預設hidden:不可見

變形風格

　　變形風格transform-style允許變形元素及其子項目在3d空間中呈現。變形風格有兩個值。flat是預設值，表示2d平面；而perserve-3d表示3d空間

　　[注意]當設定了overflow:非visible或clip:非auto時，transform-style:preserve-3d失效

transform-style: flat | preserve-3d

 

深入理解 CSS變形 transform(3d)