說道變換，我們能想到那些變換呢？
1、位移 translate
body {
width: 500px;
height: 200px;
border:5px solid black;
}
div{
width: 100px;
height: 100px;
background: red;
transition: 5s;
}
第一種: X軸、Y軸分開寫
body:hover div{
transform: translateX(300px);
}
原始狀態.png
hover后狀態.png
translateX(300px) 表示在X軸(水平方向上)向右移動300px
translateX(-30px) 表示在X軸向左移動30px
translateY(200px) 表示在Y軸(豎直方向上)向下移動200px
translateY(-200px) 表示在Y軸上向上移動200px
第二種：合寫
body:hover div{
transform:translate(200px,20px);
}
表示在X軸上向右移動200px，在Y軸上向下移動20px，如圖：
原始狀態.png
hover狀態.png
注意：
transform：translate(200px); 中寫一個值表示在X軸方向上移動
2、旋轉 rotate
rotate 當中接受的時一個旋轉角度，如45deg，單位是deg
rotate()中，正值是順時針，負值是逆時針
body:hover div{
transform:rotate(45deg);
}
效果如下圖：
原始狀態.png
hover狀態.png
3、縮放 scale
scale 當中接受的時一個數值，可以是浮點數，如1.2或者0.3或者2
scale() 中數值 大于1是放大效果，小于1是縮小效果
數值為0時元素徹底消失
body:hover div {
transform:scale(0.5); 縮小至0.5倍，如下圖所示
}
原始狀態.png
hover狀態.png
4、變形/斜切 skew
skew當中接受的也是一個旋轉角度，如40deg
skewX()
skewY()
skew(30deg,30deg)第一個值是X軸的斜切角度，第二個值是Y軸的斜切角度
那么說完這四種變換，他們連寫方式是怎樣的呢？
按照下面這個順序來寫：
body:hover div{
transform:translate(200px,0) rotate(45deg) scale(1.5) skew(15deg,15deg);
}
原始狀態.png
hover狀態.png
學習到此處，我們有沒有想到一個問題，這些變換是基于那個基點進行的呢？下面我們解釋一個名詞——變換基點
transform-origin
left
top
right
bottom
center
支持負值、正值、百分數
默認值是center（即50%），當設置相應的值后，基點會按照相應地設置的值發生變換，之后的變換會參照這個基點進行。
