介紹

transform是通過一系列矩陣變換完成的，scale等transform-function都是對matrix的封裝。

w3里的解釋是，transform基于可視化格式模型（visual formatting model，這樣翻譯對不對啊）并為其繪制出一個坐標系，而且所有在這個坐標系內進行的操作，如向右向下，都是在這個坐標系內以像素方式表示

元素設置了transform并不會改變元素所在的文檔流，其布局仍然受盒模型支配，因此這里的變換的效果是可以與浮動、定位并存的。

當元素設置了transform后，會為該元素定義一個坐標系，并且在該坐標系內進行矩陣變換，將變換結果映射到用戶坐標系（也就是實際上的上下文）中。

多個矩陣變換函數將依次從左到右計算，如transform:translate(80px, 80px) scale(1.5, 1.5)，瀏覽器會先計算位移，再縮放1.5倍。以下兩種代碼效果相同：

html

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表