Bug 52030 - Nested 3D transforms (translateZ, rotateX, rotateY) do not work correctly
Summary: Nested 3D transforms (translateZ, rotateX, rotateY) do not work correctly
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh Intel OS X 10.6
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on: 58477
Blocks:
  Show dependency treegraph
 
Reported: 2011-01-06 15:23 PST by Tom Robinson
Modified: 2011-04-13 14:16 PDT (History)
2 users (show)

See Also:


Attachments
demonstrates bug with 2 working and 2 broken examples (3.24 KB, text/html)
2011-01-06 15:23 PST, Tom Robinson
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Tom Robinson 2011-01-06 15:23:59 PST
Created attachment 78174 [details]
demonstrates bug with 2 working and 2 broken examples

A 3D transform has no effect if any ancestor element also has a 3D transform, and if the transform operates in the Z direction (translateZ, rotateX, rotateY).

The provided reduction has four examples with two cases each, one where both transforms are applied directly to the colored squares, the other where the rotateY is applied to the containing element of the same size.

The first two examples work correctly in both  cases because the transforms rotate/translate in the X/Y direction.

The second two examples do not work in the case where the rotateY transform is on the containing element because they rotate/translate in the Z direction.
Comment 1 Simon Fraser (smfr) 2011-01-06 15:28:21 PST
This is working as expected. You need to set transform-style if you want the elements to share a 3D space. See example at http://webkit.org/blog-files/3d-transforms/transform-style.html