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

Dana Jansens danakj at chromium.org
Tue Feb 12 09:53:33 PST 2013


+shawnsingh

On Tue, Feb 12, 2013 at 9:22 AM, Marcin Szamotulski <mszamot at gmail.com>wrote:

> 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
> _______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> https://lists.webkit.org/mailman/listinfo/webkit-dev
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20130212/a2d36786/attachment.html>


More information about the webkit-dev mailing list