一. 形變
# 1.形變參考點：三軸交界點
# transfrom-origin：x軸 y軸座標
# 2.旋轉 rotate deg
# transfrom：rotate（720deg）；
# 3.偏移 translate px
# translateX(200px) translateY(200px)
# 4.縮放 scale 無單位
# transfrom：scale（X軸比例，Y軸比例）
# 注：可以多形變，空格隔開書寫在一條transfrom屬性中，順序一般會影響形變結果
# 形變不改變盒子佈局，只拿形變做動畫

# 二. 動畫
# 實現動畫：
# 1.設定動畫體
# @keyframes 動畫名 {
#        多種狀態的動畫體
#     }
# 舉例：
# @keyframes hehe {
#        /*起點可以省略,採用的是起始狀態*/
#        0%{}
#        33.3%{
#           margin-left: 800px;
#           margin-top: 50px;
#        }
#        66.6%{
#           margin-left: 500px;
#           /*在每一個動畫節點都需要明確所有做動畫屬性在該節點的屬性值*/
#           margin-top: 300px;
#        }
#        /*終點需要設定*/
#        100%{margin-top: 50px;
#           margin-left: 200px;}
#     }
#
# 2.設定動畫屬性
#     .box {
#        /*animation:動畫名 時間 運動次數(無限次infinite) 運動曲線*/
#        animation: hehe 2s infinite linear
#     }