2D變形

旋轉變形

• transform:rotate(45deg)；
• 如果角度為正，順時針旋轉，否則逆時針旋轉
• 可以通過transform-origin：0 0；來設定以哪個點為中心進行旋轉

縮放變形

• transform：scale（3）；
• 後面的數字沒有單位，大於1表示放大的倍數，小於1表示縮小（0.5就是原來的一半）

斜切變形

• transform：skew(10deg,20deg)
• 第一個表示x的斜切角度，另一個表示y的斜切角度

位移變形

• transform：translate（100px，200px）
• 第一個表示向右移動，另一個向下
• 和相對定位差不多也是老家留坑

3D變形

3D旋轉

• 將transform屬性的值設為rotateX（）或者rotateY（），即可實現繞橫軸旋轉。縱軸旋轉
• transform：rotateX（30deg）；transform：rotateY（30deg）；
• 也可以同時繞x和y一起旋轉，中間用空格隔開

perspective屬性

• 這個屬性定義透視強度，可以理解為“人眼到舞臺的距離”，單位是px
  

空間移動

• 當元素進行3d旋轉之後，就可以繼續新增translateX（），translateY(),translateZ()讓元素在控制元件進行移動
• 一定要記住是在旋轉之後再空間移動
• transform：rotateX（30edg） translateY(40edg) translateZ(50edg)；