在已经transform的元素中再次transform不起作用

Question

请见jsfiddle
在camera元素内构建了一个container元素, container元素上附着了四个roller元素, roller已经做好3d变换使其构成一个立方体. 见图(.roller{outline:2px dashed blue;})

设置container元素的本意是当我们旋转(transform:rotateX())时其上的roller立方体也可以随其旋转, 这样就不用单独设置每个立方体的transform属性了.
但是在container元素上设置transform属性时, 发现roller元素的transform属性全部失效了, 求解!
请见jsfiddle
或者去爆栈网回答

Answer 1

rotateX 那个加条 transform-style: preserve-3d;