我有一个小提琴
here你可以玩.在rotateX和rotateY滑块周围移动以查看.最接近你的元素部分较小,而较远的部分较大.如果你翻转它使用
transform:rotateZ(180deg);
看起来不对,但我不明白为什么它一开始看起来并不正确.
更新
如果你看一下this 3d cube就有意义了.立方体的变换原点是立方体的中间.
解决方法
等距
据我所知,这些方法可以正常工作,只是它们在等距3D中旋转,即没有透视.这将使您的最近和更远的边缘具有相同的尺寸,不同于真实的3D,其中更远的边缘看起来更小并且越近将看起来更大.
要深入了解等轴测投影,请阅读wikipedia article.
透视
如果要获得旋转的透视图,则必须将perspective属性添加到包含元素的CSS中.如果你将-webkit-perspective：1000px;添加到< body>在你的第一个小提琴中查看Chrome中的结果,你会得到你可能想要的透视3D.
有关该物业的更多信息,请参阅CSS3 transform spec.
