[webkit-dev] css: rotateY(90) with perspective()

[Marcin Szamotulski]

Dear WebKit-Dev,

I found an interesting difference between implementation of css 3d
transforms in Gecko (FireFox) and Chromium (WebKit).  In Gecko, the
following css rule:

tranform: perspective(500px) rotateY(90)

rotates an element (let say an image) so that it is perpendicular to the
viewer, i.e. it shows the side of the element - hence nothing is printed
to the screen, since html elements have no depth.  While in WebKit based
browsers (I have tested this in both Chromium and surf from suckles.org)
the elements is shown at an angle: both rotations (Gecko & WebKit) have
the same axis (the vertical screen directions).  Testing different
angles I have found that I need to use rotateY(107deg), but this might
depend on the perspective.   The reason for this is that WebKit and
Gecko are computing 3d view in a different way.  The additional minor
difference is that rotateY(30deg) in Gecko turns an element 30deg to the
right while in WebKit it rotates to the left (with a different 3d view).
The reason I found it is because I try to make an animation which turns
a picture around 180deg showing a new picture on the other side, and
I wanted to change the picture in the middle (90deg).  This works for
Gecko but for WebKit I need to know how to compute the angle at which
the element (image) is perpendicular to the view source (showing its
side to the viewer).  Can somebody point me how the 3d rotationY with
a given perspective is calculated so I can make the necessary
converstion.

Best regards,
Marcin Szamotulski