transform CSS 屬性可以修改CSS可視化格式模型的空間維度
使用此屬性，元素可以被平移、旋轉、縮放和傾斜...可在二維或三維空間使用
二維是只有Ｘ(水平)、Ｙ（垂直）軸的平面空間、三維則多了一個Ｚ軸的立體空間
Ｚ軸是由螢幕射出來的一個虛擬座標

2D transform

translate(X,Y):移動位子

向x軸移動x距離，Y軸移動y距離
如果只給一個值translate(200px)，就是xy都移動200px

transform:translate(22px,14px);

rotate():旋轉

以中心為参照點旋轉指定的角度，正值為順時針、負值為逆時針
CSS中角度單位有：度(deg)、梯度(grad)、弧度(rad)

1. deg屬性：
   度：deg（全稱：degress）一個圓有360度

2. grad屬性：
   梯度：grad（gradians）：一個圓共有400個梯度

3. turn屬性：
   轉、圈：turn（turns）：一個圓共1個圈
   1turn = 360deg = 400grad

4. rad屬性：
   弧度：rad（radians）：一個圓共2π弧度

.box {
        width: 100px;
        height: 100px;
        background-color: aqua;
        transform: translate(100px) rotate(20deg);
      }

scale(數字);放大或縮小

數字為輸入放大或縮小的倍數，大於1代表放大；小於1代表縮小
如果數字輸入是負的就代表翻轉

以上也可以集合使用，

transform: translate(0px, 100px) rotate(60deg) scale(1.5)

使用2D transform將以下的box做一些變化吧～

調整後