CSS 3D变换 transform3D

发布于:2022-12-23 ⋅ 阅读:(677) ⋅ 点赞:(0)

3D变换 transform3D

浏览器中我们除了可以实现 x y两轴的2D变换 也可以开启3D效果 3D效果经常用于一些复杂的绚丽效果展示 可以用来构建基础的3D模型空间

3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、

perspective-origin、backface-visibility

坐标轴

在了解透视之前,首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x、y、z三条轴组成的立体空间,x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外

 

简单记住他们的坐标:

x左边是负的,右边是正的

y 上面是负的, 下面是正的

z 里面是负的, 外面是正的

透视(perspective)

电脑显示屏是一个2D平面,图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的。

透视可以将一个2D平面,在转换的过程当中,呈现3D效果。

  • 透视原理: 近大远小 。

  • 浏览器透视:把近大远小的所有图像,透视在屏幕上。

  • perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置

注:并非任何情况下需要透视效果,根据开发需要进行设置。

perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素

理解透视距离原理:

d: 3D坐标系 z轴的长度

z: 元素沿着Z轴移动的距离

 

 

 

translateX(x)

仅水平方向移动**(X轴移动)

主要目的实现移动效果

translateY(y)

仅垂直方向移动(Y轴移动)

 

translateZ(z)

transformZ的直观表现形式就是大小变化,实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近,在这里参照物就是perspective属性)。比如设置了perspective为200px;那么transformZ的值越接近200,就是离的越近,看上去也就越大,超过200就看不到了,因为相当于跑到后脑勺去了,我相信你正常情况下,是看不到自己的后脑勺的。

translate3d(x,y,z)

[注意]其中,x和y可以是长度值,也可以是百分比,百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和;z只能设置长度值

perspective

设置3D空间的景深 也就是z轴的深度, perspective 属性只影响 3D 转换元素。

perspective: 1000px;

perspective-origin

默认情况下, 坐标系的Z轴位于父元素的水平中线与垂直中线的交界处, 我们也可以通过设置perspective-origin来调整位置

使用绝对定位样式移动元素时, 此时坐标系的X轴和Y轴以设置了相对定位的祖先元素的中点为原点

 使用transform的位移样式或是相对定位样式移动元素时, 此时坐标系的X轴和Y轴以元素的中点为原点

 

 

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到