html - 如何讓有transform效果的父元素不影響其子元素
問題描述
父元素使用css3的transform屬性后,子元素也會跟著扭曲,如何讓子元素不受影響?先謝謝各位了!比如父元素transform: translate3d(x, y, z) 后,子元素能不能也加上旋轉的屬性,把自己轉回來?
問題解答
回答1:設置后代:
.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);}
這里有兩個連接,可以參考下: - 點我 - 再點我
相關文章:
1. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗!2. golang - 用IDE看docker源碼時的小問題3. docker安裝后出現Cannot connect to the Docker daemon.4. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題5. 為什么我ping不通我的docker容器呢???6. 我在centos容器里安裝docker,也就是在容器里安裝容器,報錯了?7. docker-compose中volumes的問題8. docker容器呢SSH為什么連不通呢?9. docker-machine添加一個已有的docker主機問題10. docker - 各位電腦上有多少個容器啊?容器一多,自己都搞混了,咋辦呢?

網公網安備