久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁技術文章
文章詳情頁

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
相關文章:
主站蜘蛛池模板: 遂川县| 万宁市| 永德县| 河南省| 宁波市| 澄迈县| 东乡县| 潜江市| 九台市| 明星| 岑巩县| 从化市| 清丰县| 盐源县| 普安县| 达拉特旗| 清涧县| 焦作市| 茶陵县| 五峰| 扬中市| 罗田县| 定西市| 东丽区| 新野县| 高密市| 枣阳市| 当雄县| 沙雅县| 兴化市| 武川县| 社会| 镇巴县| 六枝特区| 海兴县| 镇安县| 泗水县| 伊宁市| 马山县| 新河县| 宜良县|