CSS3中perspective、perspective-origin、transform-style: preserve-3d和transform中的rotate详细解释、纯CSS3动画正方体贴图

最新推荐文章于 2023-12-22 15:38:42 发布

YF-SOD

最新推荐文章于 2023-12-22 15:38:42 发布

阅读量791

点赞数 1

分类专栏： CSS 文章标签： perspective详解 preserve-3d详解 CSS3rotate结合平移纯css3正方体贴图动画 css3中的立体空间坐标详解

本文链接：https://blog.csdn.net/AIWWY/article/details/116375851

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

transform-style: preserve-3d

纯CSS3动画正方体贴图小项目链接和GIF图片

transform-style: preserve-3d

属性规定如何在 3D 空间中呈现被嵌套的元素，有flat和preserve-3d两种参数，默认为flat表示子元素将不保留3d位置（注意只有子元素会实现3d效果），preserve-3d相反（理解为设置后元素之间的覆盖关系将不会根据出生先后以及z-index等影响，而是通过立体几何的3d关系决定覆盖关系，且未设置时，旋转将会是只旋转覆盖关系的最后一个元素即只看见一个面的旋转）。

perspective

定义 3D 元素距视图的距离，以像素计。该属性允许改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子孙元素会获得透视效果，而不是元素本身，子孙元素重复时，以孙元素为主。指定了观察者与z=0平面的距离，使具有三维变换的元素产生透视效果（理解为眼睛距离浏览器屏幕的距离，在设置元素的中心向外，这里用一个别人的例子比如一个1680像素宽的显示器中有张美女图片，应用了3D transform，同时，该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致！，下图为设置父集perspective为1000px，子集有高600px的图片、translateZ为300px即z轴方向向外移动300px时，屏幕中图片显示为857.14的像素原因）。

perspective-origin

定义 3D 元素所基于的 X 轴和 Y 轴（需要搭配perspective使用，无法单独使用）。该属性允许改变 3D 元素的底部位置。当定义perspective -Origin属性时，会调整子孙元素的perspective而不是元素本身。实质上为元素变形的原点，默认值为 50% 50% ，该数值和后续提及的百分比默认均基于元素自身的宽高算出具体数值（在数值不是特别高的情况下即一般情况下，可以简单理解为眼睛位置的x、y方向定位，是以设置元素的左上角定点为0,0点，不设置时默认50%50%，即相当于眼睛在该元素中心点的z轴位置上，比如正对一个正方体，我们只能看得到它一个面时，当第一个参数大于50%+n时，我们就可以看见该正方体的右侧面，相当于眼睛向右侧移动了，当第二个参数大于50%+n时，我们就可以看见该正方体的底面，相当于眼睛向下侧移动了，按道理n应该为0.5但实际为0.5~0的一个值）。

rotate

如图我们首先要理解计算机的空间坐标系，它是以元素的中心（图中大的正方形可比作元素）建立x、y轴（和定位absolute中的x，y轴相同），z轴理解为从屏幕指向眼睛的方向，传入度数值，表示绕X或Y或Z轴旋转，其中绕x轴旋转时，+Z向-Y方向为正方向，绕y轴旋转时，+z向+x方向为正方向，绕z轴旋转时，-Y向+X方向。注意设置时的无先后顺序，例如rotateX(30px) translateX(30deg)和translateX(30deg) rotateX(30px)是两个不同的位置，且选择的解释也不同，第一种的旋转是先translate后绕原先的X轴rotate，第二种是绕translate后绕自身的X轴旋转（原点也经过了translateX）；然后子元素经过了translate后，其父元素的旋转绕的轴是原始的轴（不是自身的），即rotateX（30deg） rotateY（30deg）和rotateY（30deg） rotateX（30deg）可能表示一个位置，也可能表示不同位置，在于子元素是否该变了图形的位置。一定要注意，不然搞了贼久还以为其它的属性出了问题，写的时候最好就要注意好顺序，不同的写法顺序不同，rotateX(30deg)

translate

空间坐标系同上，也是分别表示向3个方向平移的像素，这里再次强调一下上面的重点：rotateX(30px) translateX(30deg)和translateX(30deg) rotateX(30px)是两个不同的位置，且旋转的解释也不同，第一种的旋转是先translate后绕原先的X轴rotate，第二种是先translate后绕自身的X轴旋转（原点也经过了translateX）；然后子元素经过了translate后，其父元素的旋转绕的轴是原始的轴（不是自身的），即rotateX（30deg） rotateY（30deg）和rotateY（30deg） rotateX（30deg）可能表示一个位置，也可能表示不同位置，在于子元素是否该变了图形的位置。