the DOM hierarchy of the URL above is body __container ____stage ______shape ________tiltX __________plane ____________elem1 __________plane ____________elem2 __________plane ____________elem3 __________plane ____________elem4 ... elem1, through elem6 are the 6 planes of the cube, each with translation and rotation. But, "plane" does not have --webkit-transform-style: preserve-3d, only "tiltX" does which as AFAICT means elem1 through elem6 should be in just part of their parent "plane" element To make it clearer ________tiltX <- preserve-3d __________plane <- implicit flat ____________elem1 <- implicit flat + trans & rot based on my understanding of the spec, since "plane" is implicitly style "flat", "elem1" should not be "3d"
PS:, the sample looks correct now but AFAICT it shouldn't. In order to work it should require .plane { -webkit-transform-style: preserve-3d; }
Yes, we do not follow the 3d transforms spec very well in this area; the spec is still a bit fuzzy here. <rdar://problem/6438206>