当前位置： 移动技术网 > IT编程>网页制作>CSS > 3D变形 CSS3 transform---rotateX(), rotateY(), rotateZ(), 透视(perspective)

3D变形 CSS3 transform---rotateX(), rotateY(), rotateZ(), 透视(perspective)

2019年11月14日  | 移动技术网IT编程  | 我要评论

恶女漂流记,拉德万斯卡 凸点,言情小说吧免费阅读

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

理解透视距离原理：

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网