轉換 (transform)實現元素的位移、旋轉、縮放等效果，可以簡單理解為變形。

• 移動 translate
• 旋轉 rotate
• 縮放 scale

1.2D轉換之移動(translate)

2D移動式轉換裡面的一種功能，可以改變元素在頁面中的位置 類似定位

語法:

transform:translate(x,y);或著分開寫
transform:translateX(n);
transform:translateY(n);

注意事項:

• 定義2D轉換中的移動，沿著X和Y軸移動元素
• translate最大的優點 : 不會影響到其他元素的位置
• translate中的百分比單位是相對於自身元素的translate : (50% 50%);
• 對行內標籤沒有效果

CSS:
    <style>
        /* 移動盒子的位置: 定位 盒子的外邊距 2D轉換移動 */
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform:translate(x,y)
            transform: translate(500px, 0); */
        }

        div:nth-child(2) {
            background-color: purple;
        }

        div:first-child {
            transform: translate(30px, 30px);
        }
    </style>
    
HTML:
    <div>粉色盒子移動</div>
    <div>紫色盒子</div>

translate 移動

2.2D轉換之旋轉 rotate

2D旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。

語法:

transform:rotate(度數)

注意事項:

• rotate裡面跟度數，單位是deg比如rotate(45deg)
• 角度為正時，順時針，負時，為逆時針
• 默認旋轉的中心點是元素的中心點

CSS:
    div {
      height:400px;
        width: 300px;
        /* 順時針旋轉30度 單位為deg */
        /* transform: rotate(30deg); */
        border-radius: 50%;
        border: 5px solid pink;
        /* 過度寫到本身上 誰做動畫給誰加 */
        transition: all 5s;
    }

    div:hover {
        transform: rotate(120deg);
    }
    
HTML:
    <div> </div>

rotate 旋轉

3.變更中心點 transform-orgin

設置元素的中心點

語法:

transform-origin: x y;

注意事項:

• 注意後面的參數x和y用空格隔開
• x y 默認轉換的中心點是元素的中心點 (50% 50%)
• 還可以給x y 設置 像素或者方位名詞 (top bottom left right center)

transform-origin 變更中心點

4.2D轉換之縮放 scale

只要給元素添加上scale就能控制他放大還是縮小

語法:

transform:scale(x,y);

注意事項:

• 注意其中x和y是用逗號分隔
• transform:scale(1,1) : 寬和高都放大了一倍，相對於沒有放大
• transform:scale(2,2) : 寬和高都放大了兩倍
• transform:scale(2) : 只寫一個參數 第二個參數則和第一個參數一樣，相當於scale(2,2)
• transform:scale(0.5,0.5): 縮小
• scale縮放的最大優勢 : 可以設置轉換中心點縮放，默認以中心點縮放的，而且不影響其他盒子

scale 縮放

5.2D轉換簡寫

語法:

transform : translate() rotate() scale() ...

注意事項:

1. 其順序會影響轉換的效果 (先旋轉會改變座標軸方向)
2. 當我們有位移和其他屬性的時候，記得要將位移放在最前

2D轉換簡寫