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

Tue Feb 12 14:18:51 PST 2013

I opened a new bug report:
https://bugs.webkit.org/show_bug.cgi?id=109613

Best,
Marcin

On 12:07 Tue 12 Feb     , Levi Weintraub wrote:
> 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
> >
> >

> _______________________________________________
> webkit-dev mailing list
> webkit-dev at lists.webkit.org
> https://lists.webkit.org/mailman/listinfo/webkit-dev