html – 为什么对转换元素的观点会倒退？

概述我有一个小提琴 here你可以玩.在rotateX和rotateY滑块周围移动以查看.最接近你的元素部分较小,而较远的部分较大.如果你翻转它使用 transform:rotateZ(180deg); 看起来不对,但我不明白为什么它一开始看起来并不正确. 更新 如果你看一下this 3d cube就有意义了.立方体的变换原点是立方体的中间. 等距 据我所知,这些方法可以正常工作,只是它们在等距3D中 我有一个小提琴 here你可以玩.在rotateX和rotateY滑块周围移动以查看.最接近你的元素部分较小,而较远的部分较大.如果你翻转它使用

transform:rotateZ(180deg);

看起来不对,但我不明白为什么它一开始看起来并不正确.

更新

如果你看一下this 3d cube就有意义了.立方体的变换原点是立方体的中间.

解决方法 等距

据我所知,这些方法可以正常工作,只是它们在等距3D中旋转,即没有透视.这将使您的最近和更远的边缘具有相同的尺寸,不同于真实的3D,其中更远的边缘看起来更小并且越近将看起来更大.

要深入了解等轴测投影,请阅读wikipedia article.

透视

如果要获得旋转的透视图,则必须将perspective属性添加到包含元素的CSS中.如果你将-webkit-perspective：1000px;添加到< body>在你的第一个小提琴中查看Chrome中的结果,你会得到你可能想要的透视3D.

有关该物业的更多信息,请参阅CSS3 transform spec.

总结

以上是内存溢出为你收集整理的html – 为什么对转换元素的观点会倒退？全部内容，希望文章能够帮你解决html – 为什么对转换元素的观点会倒退？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。