Geek asks and answers

CSS 3D Conversion 3D Problem

I use CSS3 to perform the following conversion to div:

'-webkit-transform' : 'rotateX(45deg) rotateZ(-45deg)'

The result looks like this:

enter image description here

Or as in this script: http://jsfiddle.net/kteSW/

As we see here, the angle is 36deg instead of 30deg (sin45 * sin45). Does anyone know the cause of this problem? Is this intended or is it a CSS3 bug?

UPDATE:

I already set the options:

-webkit-transform-style: preserve-3d; -webkit-perspective: none;

So, everything should be rendered in an orthogonal way. However, the angle is not yet 30deg.

+5
source share
1 answer

What we are trying to achieve is to calculate the angle between the eye and the Z axis when we look at (0, 0, 0) from (1, 1, 1).

So this is actually (90 deg) - arctan(1 / sqrt(2)) = 54.7356103 deg, not 45deg.

+6
source

More articles:


All Articles