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

问题描述

问 题

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

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

解决方案

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

这篇关于css - 在已经transform的元素中再次transform不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！