CSS之 基礎的2D轉換模組

2021-07-28 17:59:39 字數 689 閱讀 8138

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轉換中的移動,沿著...