文章詳情頁
css3 - transform的順序不同為何會使元素的形狀不同。
瀏覽:230日期:2023-07-12 10:40:10
問題描述
兩個形狀完全一樣的p 設置了transform的三個值 但是三個值的順序不同。所以產生的兩個p的形狀也不相同,原因是什么。貼一個在線地址http://sandbox.runjs.cn/show/r9sqhw5y
p { position: absolute; top: 40px; left: 40px; width: 100px; height: 100px; background-color: blue; border: 1px solid red; transform: translate(10px) rotate(50deg) skew(20deg);}p.test { transform: skew(20deg) rotate(50deg) translate(10px);left: 240px;}
PS: 與 transform-origin 無關
問題解答
回答1:因為矩陣不滿足交換率,即 [A] [B] != [B] [A]比如你的手機正面向上經過1:向內反轉,再向左翻轉之後屏幕朝向左。2.向左翻轉,再向內翻轉之後屏幕朝向你。
回答2:因為 transform 屬性如果有多個值,是依次執行變換的。
就這么簡單。
標簽:
CSS
相關文章:
1. docker images顯示的鏡像過多,狗眼被亮瞎了,怎么辦?2. 如何解決docker宿主機無法訪問容器中的服務?3. docker gitlab 如何git clone?4. 怎么用css截取字符?5. html - 為什么我給div設置display:inline然后設置height還是有效呢6. service mysql.server start 啟動失敗7. javascript - 右列定寬,左列自適應且有最小寬度8. html5 - 前端切一個透明背景的問題?9. java - Web開發 - POI導出帶有下拉框的Excel和解決下拉中數組過多而產生的異常10. javascript - ios下獲取焦點失敗
排行榜
