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变换效果？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1630969.html
微信扫一扫 
支付宝扫一扫 
