transform屬性基本使用
transforom 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
可以通過一些小案例來了解對應的功能；
譬如：旋轉（rotate(angle)，定義 2D 旋轉，在參數中規定角度。）
---》
---》
以上三幅圖是利用固定軸Y軸 翻轉不同度數達到輕盈翻轉效果
(可以調不同的度數來達到你想要的翻轉效果)
同時添加要transtion（秒）元素的過渡時間達到理想效果。
譬如：轉換（translateY(y)，定義轉換，隻是用 Y 軸的值。）
下圖的三行字是定位定在輪播上的，我們通過利用translateY/transforomX設定不同的區間範圍達到三行字分别往不同的方向走 效果有如水草流動
下圖是想要的效果
建立一個關鍵幀（往下走）：
@keframes hh{
0%{
opacity:0;
transform:translateY(20px);
}
100%{
Opacity：1;
transform:translateY(0px);
}}
建立一個關鍵幀（往左移）：
@keframes hd{
0%{
opacity:0;
transform:translateX(20px);
}
100%{
Opacity：1;
transform:translateX(0px);
}}
建立一個關鍵幀（往上走）：
@keframes hd{
0%{
opacity:0;
transform:translateX(0px);
}
100%{
Opacity：1;
transform:translateX(-20px);
}}
最後将關鍵幀引入css内
譬如：縮放+旋轉（scale(x,y)定義 2D 縮放轉換/rotate(angle)定義 2D 旋轉，在參數中規定角度）
原圖 transition:all 0.2s linear;設定元素的過渡時間
transform:scaleY(0.0) rotateX(0deg);設定複合屬性（縮放+旋轉）
以X軸為軸心，旋轉0度，縮放Y軸先為0。
效果呈現
效果呈現
譬如：skew() 方法
通過 skew() 方法，元素翻轉給定的角度，根據給定的水準線（X 軸）和垂直線（Y 軸）參數：
執行個體
div{
transform:skewY(-10deg);
}
其中transform有其他的字首
可以來了解一下是什麼意思
-ms-transform:
-webkit-transform:
-o-transform:
-moz-transform: