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 <[email protected]>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 <[email protected] > > >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 <[email protected]> > > wrote: > > > > > > > >> +shawnsingh > > > >> > > > >> > > > >> On Tue, Feb 12, 2013 at 9:22 AM, Marcin Szamotulski < > > [email protected]>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 > > > >>> [email protected] > > > >>> https://lists.webkit.org/mailman/listinfo/webkit-dev > > > >>> > > > >> > > > >> > > > > > > > > _______________________________________________ > > > > webkit-dev mailing list > > > > [email protected] > > > > https://lists.webkit.org/mailman/listinfo/webkit-dev > > > > > > > > > > > > > _______________________________________________ > > > webkit-dev mailing list > > > [email protected] > > > https://lists.webkit.org/mailman/listinfo/webkit-dev > > > > _______________________________________________ > > webkit-dev mailing list > > [email protected] > > https://lists.webkit.org/mailman/listinfo/webkit-dev > > _______________________________________________ webkit-dev mailing list [email protected] https://lists.webkit.org/mailman/listinfo/webkit-dev
