3D變形(CSS3) transform

 3D特色

近大遠小。

物體後面遮擋不可見

三維座標系

三維座標系其實就是指立體空間，立體空間是由3個軸共同組成的。 

 

 

 

簡單記住他們的座標：相對盒子自己的位置來移動的

x左邊是負的，右邊是正的

y 上面是負的， 下面是正的

z 裏面是負的， 外面是正的

rotateX()

就是沿着 x 立體旋轉.

img {
transition:all 0.5s ease 0s;
}
img:hove {

transform:rotateX(180deg);
}

rotateY()

沿着y軸進行旋轉

img {
transition:all 0.5s ease 0s;
}
img:hove {

transform:rotateX(180deg);
}

rotateZ()

沿着z軸進行旋轉

img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

ltransform:rotate3d(x,y,z,deg)：

沿着自定義軸旋轉 deg爲角度（瞭解便可）

xyz是表示旋轉軸的矢量，是表示你是否但願沿着該軸旋轉，最後一個表示旋轉的角度

• ltransform:rotate3d(1,0,0,45deg) 就是沿着x軸旋轉 45deg

• ltransform:rotate3d(1,1,0,45deg) 就是沿着對角線旋轉 45deg

透視(perspective)

電腦顯示屏是一個2D平面，圖像之因此具備立體感（3D效果），其實只是一種視覺呈現，經過透視能夠實現此目的。

透視能夠將一個2D平面，在轉換的過程中，呈現3D效果。

• 若是想要在網頁產生3D效果須要透視（理解成3D物體投影在2D平面內）。

• 透視的單位是像素

• 透視原理： 距離視覺點越近的在電腦平面成像越大，越遠成像越小

• 瀏覽器透視：把近大遠小的全部圖像，透視在屏幕上。

• perspective：視距，表示視點距離屏幕的長短。視點，用於模擬透視效果時人眼的位置

注：並不是任何狀況下須要透視效果，根據開發須要進行設置。

perspective 通常做爲一個屬性，設置給父元素，做用於全部3D轉換的子元素

理解透視距離原理：

 

 

translateX(x)

僅水平方向移動（X軸移動）主要目的實現移動效果

translateY(y)

僅垂直方向移動（Y軸移動）

translateZ(z)

 （注意：translateZ通常用px單位）

transformZ的直觀表現形式就是大小變化，實質是XY平面相對於視點的遠近變化（說遠近就必定會說到離什麼參照物遠或近，在這裏參照物就是perspective屬性）。好比設置了perspective爲200px;那麼transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不見了。

translate3d(x,y,z)

簡寫中x,y,z 的值是不能省略的，沒有就設置爲0

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

backface-visibility

backface-visibility 屬性定義當元素不面向屏幕時是否可見。

3D呈現transfrom-style

• 控制子元素是否開啓三維立體環境。。

• transform-style: flat 子元素不開啓3d立體空間 默認的

• transform-style: preserve-3d; 子元素開啓立體空間

• 代碼寫給父級，可是影響的是子盒子

• 這個屬性很重要，後面必用

 

翻轉盒子案例

div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /* 不是正面對象屏幕，就隱藏 */ } div:hover img { transform: rotateY(180deg);}