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

Tue Feb 12 12:07:25 PST 2013

Either way, I'd suggest you take this conversation to a specific bug report
:)

On Tue, Feb 12, 2013 at 11:49 AM, Shawn Singh <shawnsingh at chromium.org>wrote:

> Hi Marcin,
>
> I wonder if you might accidentally have a "perspective-origin" set
> differently?  Or maybe there is something in your code where window size
> that affects how the transforms appear?  Maybe you can attach a reduced
> simple example of the difference you're seeing?   I just whipped up the
> following example, which renders almost exactly the same geometry on both
> Firefox and tip-of-tree Chromium.
>
> <body>
>   <div style="-moz-transform: perspective(500px) rotateY(80deg);
>
>
>
>               -webkit-transform: perspective(500px) rotateY(80deg);
>
>
>
>               background-color: lime;
>
>
>
>               width: 300px;
>
>
>
>               height: 300px;" >
>     HELLO WORLD
>   </div>
> </body>
>
>
> Changing the rotateY to use 90deg makes the layer disappear for both
> Firefox and Chromium, too.
>
> ~Shawn
>
>
>
>
> On Tue, Feb 12, 2013 at 9:53 AM, Dana Jansens <danakj at chromium.org> wrote:
>
>> +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
>>>
>>
>>
>
> _______________________________________________
> 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/55fe0a6c/attachment.html>