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

golang学习网今天将给大家带来《为什么将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变换效果？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！