2d轉換需要用到 transform屬性。
transform本身就是改變的意思,所以2d轉換可以實現一些轉換,比如:旋轉(rotate)、平移(translate)、縮放(scale)等
-------------------------------------------分割線--------------------------------------
①旋轉的格式:
transform:rotate(45deg); //旋轉45度,deg是單位。
②平移的格式:
transform: translate(x px,y px); // 第乙個引數是水平方向的,第二個引數是垂直方向的
③縮放的格式:
transform:scale(n,n); //第乙個引數是水平方向上擴大為原來的n倍,第二個引數是垂直方向上擴大為原來的n倍。
如果兩個引數都是1,那麼大小不變。
如果引數大於一,就放大;反之如果引數小於1,就縮小。
舉個栗子:
CSS之2D轉換模組
參考w3手冊 transform 屬性向元素應用從2d 或3d轉換。該屬性允許我們對元素進行旋轉 縮放 移動或者傾斜。預設情況下所有元素都是圍繞z軸進行旋轉,如果想圍繞哪個軸旋轉,那麼只需要在rotate後面加上哪個軸即可。如 transform rotatez 45deg transform ro...
CSS3中2D轉換之位移
css3中2d轉換之位移 css3中移動盒子位置的方法有 定位 改變盒子的外邊距 2d轉換移動。接下來,我們學習2d轉換中位移的方法。首先,我們給出兩個div盒子作為研究物件,舉例 如下 我們分別給兩個盒子設定性質,同時用不同的顏色進行區分,如下 div first child div last c...
2D轉換之移動translate
4.2 2d轉換之移動translate 2d移動是2d轉換裡面的一種功能,可以改變元素在頁面中的位置,類似定位 1.語法 transform translate x,y transform translatex n transform translatey n 2.重點 定義2d轉換中的移動,沿著...