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转换的子元素

理解透视距离原理：