84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
父元素使用css3的transform属性后,子元素也会跟着扭曲,如何让子元素不受影响? 先谢谢各位了! 比如父元素transform: translate3d(x, y, z) 后,子元素能不能也加上旋转的属性,把自己转回来?
ringa_lee
设置后代:
.children1, .children2, .childrenN { -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; }
或者让后代反向操作,比如反向旋转:
.parent { position: relative; background-color: yellow; width: 200px; height: 150px; margin: 70px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .child { position: absolute; top: 30px; left: 50px; background-color: green; width: 70px; height: 50px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); }
这里有两个连接,可以参考下: - 点我 - 再点我
设置后代:
或者让后代反向操作,比如反向旋转:
这里有两个连接,可以参考下:
- 点我
- 再点我