html中的2D效果的實現
阿新 • • 發佈：2021-11-11
2D就是平時看到的平面，就是在螢幕上水平和垂直的交叉線X軸和Y軸
1：2D中的位移屬性：
transform:translate(引數1，引數2) 單位為px
引數1：在X軸上移動的距離（正值為右移，負值為左移）
引數2：在Y軸上移動的距離（正值為下移，負值為上移）
也可單獨設定XY軸，用transform:translateX(), transform:translateY()。
用之前效果：
用之後效果：
2: 2D中的旋轉屬性：
transform:rotate(引數1，引數2) 單位為deg
引數1：在X軸上移動的距離（正值為右移，負值為左移）
引數2：在Y軸上移動的距離（正值為下移，負值為上移）
也可單獨設定XY軸，用transform:rotateX(), transform:rotateY()。
用之前同圖一。
用之後效果如下：
3： 2D中的縮放屬性：
transform:scale(引數1，引數2) 無單位
引數1：水平上的縮小放大。
引數2：垂直上的縮小放大。
也可單獨設定XY軸，用transform:scaleX(), transform:scaleY()。
引數在0~0.9999中為縮小，大於1為放大。
用之前同圖一。
放大之後效果如下：
4: 2D中的傾斜屬性：
transform:skew(引數1，引數2) 單位deg
引數1：水平上的縮小放大。
引數2：垂直上的縮小放大。
也可單獨設定XY軸，用transform:skewX(), transform:skewY()。
用之前同圖一。
傾斜之後效果如下：