為什麼css3使用transform作為屬性而不是直接使用rotate translate?

時間 2021-06-02 16:04:32

1樓:Saviio

前面幾位已經說了一些了,我再補充一下。

正好前兩天在寫有關parallax的plugin,裡面實現了乙個針對css3的transform中常規變換的轉換函式。樓主你題旨裡的提到的寫法,正如輪子哥說的,css3裡其實是實現了你描述的「簡易模式」的,只是由於他們在定義上都從屬於transform,因此直接作為transform的value來表達了。

比如transform

:scale(2

);/*放大200%*/

或者transform

:translate

(10px

,10px

)rotate

(20deg

)/*平面上向基準點右側偏移10畫素,向下偏移10畫素,同時旋轉20度*/

至於你後面補充裡提到的問題,實際上你可以嘗試下,無論你在css檔案裡怎麼指定transform的變換方式,是scaleX也好,還是translate,亦或者skew,當你在前端用getComputedStyle去獲取transform的時候,你會發現得到的永遠都是matrix,也就是說所有的具名變換實際上都是matrix的縮寫,而唯一可能出現的區別無非是到底會得到matrix還是matrix3d,因為matrix正好可以完整的表達線性變化與圖形向量之間的關係。就像付強說的,假設你同時指定了多項變換,由於乙個元素只會匹配乙個矩陣,所以對渲染引擎來說所有的變換最後都會被計算成乙個矩陣進行儲存(只是要注意計算順序),然後重新渲染元素。

另外附上MDN裡幾個標準變換的描述方法以及其對應的矩陣形式 transform-function

2樓:付三歲

rotate、translate 可以理解成transform的子集,transform 不但可以單獨實現rotate、translate。 並且和可實現rotate、translate等的組合呀,比如你需要rotate 的同時又translate。就可以把這2個變化矩陣組合成乙個符合的矩陣。

而且除了rotate、translate 以外還有其他很多種變換。

給你個二維圖形矩陣變換的簡單原理。

變換的矩陣表示形式

css3為什麼有通用還要加相容字首

龍博韜 其實還是歷史遺留問題又沒有及時遵循最佳實踐導致的問題。對於字首最理想的情況就是,我css屬性字首正好滿足我業務需要相容的所有瀏覽器。但是實際情況是瀏覽器版本的更新迭代中某些以前的相容字首變的沒必要了,但是這個的感知是沒那麼快的,比如可能突然發現安卓4.4以下裝置已經很稀少了,這樣就可以砍掉f...

初學者可以直接跳過 CSS 直接學習 CSS3 嗎?

Cyandev CSS3只是CSS的補充,也不過是新增了幾個屬性,並且這些屬性都需要瀏覽器支援 加 webkit o moz 只有CSS基本的東西是所有瀏覽器通用的,肯定要學CSS了 CSS3只是CSS2.1的乙個擴充套件。學習曲線都是一樣的,不是因為版本不同而不能。他們始終都是表現層,你要掌握的是...

為什麼很多瀏覽器不直接支援原始的 CSS3 樣式,而要使用特定字首(如 webkit moz 等)呢?

因為標準還沒有定下來,如果提前使用字首會導致未來的不相容。這一點可以參考 IE6 中的display inline block問題,它在標準提到 inline block 之前就使用了 inline block 這個值,當標準後於實現提出 inline block 並給出不一樣的含義時,這個問題就很...