为什么将perspective样式设置在带有transform-style: preserve-3d样式的元素的父级元素上才能得到预期的3D变换效果？

perspective必须设置在带有transform style: preserve-3d样式的元素的父级元素上吗？

问题：

你的HTML和CSS代码中，将perspective样式设置在了.scene元素上，当你将其移动到.cube元素后，效果却发生了变化。这是为什么？

解答：

perspective样式控制着3D变换的视角距离，而transform-style: preserve-3d样式允许元素在3D空间中变换。

• perspective设置在.scene元素上：

这时，.scene元素成为3D变换的父容器，其后代元素（.cube）将在该容器内进行3D变换。由于.cube的transform-style设置为preserve-3d，它仍然可以在3D空间中变换，同时保持其结构形状。

• perspective设置在.cube元素上：

当perspective设置在.cube元素上时，.cube元素本身将成为3D变换的容器。此时，perspective的视角距离会影响.cube元素的子元素（.cube__face），导致其在transform: rotateY()变换时发生形变。

区别：

当perspective设置在.scene元素上时，它会提供一个统一的3D变换环境，使.cube及其子元素在变换时保持其形状。而当perspective设置在.cube元素上时，它会创建多个独立的3D变换环境，导致其子元素在变换时发生形变。

总结：

为了在不使元素形变的情况下获得3D变换效果，需要将perspective样式设置在带有transform-style: preserve-3d样式的元素的父级元素上。

以上就是为什么将perspective样式设置在带有transform-style: preserve-3d样式的元素的父级元素上才能得到预期的3D变换效果？的详细内容，更多请关注其它相关文章！