css3 3d x y z 轴,3D变形 CSS3 transform---rotateX(), rotateY(), rotateZ(), 透-站长资讯中心

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

理解透视距离原理：

原文链接:https://www.cnblogs.com/jane-panyiyun/p/11855508.html

如有疑问请与原作者联系

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有