對於transform屬性的多值的順序問題，我自己就被困擾過。後來知道了跟順序有關，但是不知道為什麼。我想應該很多人跟我以前一樣，知其然不知其所以然。如果不知道的，也許這篇文章會對大家有所幫助。
先來看乙個例子。
紅框一transform屬性只有乙個值rotate(45deg)，紅框二多了乙個值translate(100px, 100px)，水平和豎直都平移100px，但是從圖中可以看到紅框2只有豎直方向有位移。這是怎麼回事？
其實，當旋轉45度後，元素的整個座標系都旋轉了45度，如下圖：
圖1就是正常的座標系，圖2就是旋轉45度後的座標系。所以紅框二就按旋轉後(選中的錨點在中心點，正數為順時針)的座標系進行平移（沿圖2中x和y軸的方向移動，x軸移動會向右下，y軸移動會向左下）。因為我設定的值比較特殊，所以只有在豎直方向有位移。通過計算紅框二豎直向下平移了100√2px，也就是紅框對角線的長度。
筆記 CSS3transform屬性
transform屬性有斜拉 skew 縮放 scale 旋轉 rotate 位移 translate 斜拉skew 用法skew 10deg 或者skew 10deg,20deg 兩個引數表示傾斜角度 乙個引數時表示水平方向傾斜 兩個引數時，第乙個表示水平方向傾斜，第二個引數表示垂直方向傾斜 sk...
CSS3 transform的skew屬性值詳解
我剛剛接觸transform的skew屬性值時一頭霧水，根本不知道種東西到底是咋變的。上網查，各個 上也只說這個使用來做扭曲變換的，具體是咋變的就是不說。無奈我只好自己研究了，現把研究結果共享一下。首先說變換的時候座標系是咋建的，如下圖 transform origin 0px 0px 既然skew...
css3 transform方法常用屬性
css3中transform方法是乙個功能強大的屬性，可以對元素進行移動 縮放 轉動 拉長或拉伸等功能。transform中最為常用的4個屬性分別是 rotate scale skew translate 1.旋轉rotate 在我之前地文章中提到過，在這就不重複描述了，我要在剩下的3個方法中去詳細...