Why does perspective on transformed elements appear backwards?
I have a fiddle here you can play with. Move around the rotateX and rotateY sliders to see. The part of the element that is closest to you is smaller while the part that is farther away is bigger. If you flip it around using
transform:rotateZ(180deg);
it looks right but I don't understand why it doesnt just look right in the first place.
update
it makes sense if you look at this 3d cube. the transform origin of the cube is the middle of the cube.
Isometric
As far as I can tell the methods work as they are suppose to, it's just that they are rotated in isometric 3D, that is without perspective. This will make your closest and further edges will have the same size, unlike real 3D where the further edge will look smaller and the closer will look bigger.
For a in depth look at isometric projection give the wikipedia article a read.
Perspective
If you want to get perspective on the rotations you have to add the perspective property to your CSS for the containing element. If you add -webkit-perspective: 1000px; to <body> in your first fiddle and view the result in Chrome you'll get perspective 3D like you probably wanted.
More info on that property can be found in the CSS3 transform spec.
链接地址: http://www.djcxy.com/p/12296.html上一篇: 如何在页面/ DOM准备好时调用函数
下一篇: 为什么变形元素的视角出现倒退？