[webkit-dev] css: rotateY(90) with perspective()
Marcin Szamotulski
mszamot at gmail.com
Wed Feb 13 08:39:41 PST 2013
As suggested on this thread I moved the discussion to the WebKit
bugzilla:
https://bugs.webkit.org/show_bug.cgi?id=109613
I am on Linux. Actually not only perspecitve is ignore but all 3d
transforms are not rendered (see examples which I have attached to the
bugzilla report).
Thanks for help,
Marcin
On 14:28 Tue 12 Feb , Rik Cabanier wrote:
> Those render exactly the same for me in chrome and ff:
> http://jsfiddle.net/8pyDK/
> What OS are you testing on? It seems that the perspective is ignored.
>
> On Tue, Feb 12, 2013 at 2:18 PM, Marcin Szamotulski <mszamot at gmail.com>wrote:
>
> > 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
> >
> > _______________________________________________
> > webkit-dev mailing list
> > webkit-dev at lists.webkit.org
> > https://lists.webkit.org/mailman/listinfo/webkit-dev
> >
More information about the webkit-dev
mailing list