微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

我有一个小提琴 here你可以玩.在rotateX和rotateY滑块周围移动以查看.最接近你的元素部分较小,而较远的部分较大.如果你翻转它使用
transform:rotateZ(180deg);

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

更新

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

解决方法

等距

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

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

透视

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

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

原文地址:https://www.jb51.cc/html/225598.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐