Menu
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.
219
The perspective() transform function is part of the transform value applied on the element being transformed. This differs from the perspective and perspective-origin properties which are attached to the parent of a child transformed in 3-dimensional space.
The perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.
The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
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.
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.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
