3D變形 CSS3 transform---rotateX(), rotateY(), rotateZ(), 透視(perspective)

2d x y

3d x y z

左手座標系

伸出左手，讓拇指和食指成「L」形，大拇指向右，食指向上，中指指向前方。這樣咱們就創建了一個左手座標系，拇指、食指和中指分別表明X、Y、Z軸的正方向。以下圖

 

CSS3中的3D座標系與上述的3D座標系是有必定區別的，至關於其繞着X軸旋轉了180度，以下圖

 

簡單記住他們的座標：

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); */
}

 

透視(perspective)

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

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

• 透視原理： 近大遠小 。
• 瀏覽器透視：把近大遠小的全部圖像，透視在屏幕上。
• perspective：視距，表示視點距離屏幕的長短。視點，用於模擬透視效果時人眼的位置

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

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

理解透視距離原理：