perspective必须设置在带有transform style: preserve-3d样式的元素的父级元素上吗？
问题：
你的HTML和CSS代码中，将perspective样式设置在了.scene元素上，当你将其移动到.cube元素后，效果却发生了变化。这是为什么？
解答：
perspective样式控制着3D变换的视角距离，而transform-style: preserve-3d样式允许元素在3D空间中变换。
这时，.scene元素成为3D变换的父容器，其后代元素（.cube）将在该容器内进行3D变换。由于.cube的transform-style设置为preserve-3d，它仍然可以在3D空间中变换，同时保持其结构形状。
当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变换效果？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
640
收藏
