說道變換，我們能想到那些變換呢球凰？
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);
}
原始狀態(tài).png
hover后狀態(tài).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斥黑，如圖：
原始狀態(tài).png
hover狀態(tài).png
注意：
transform：translate(200px); 中寫一個值表示在X軸方向上移動
2、旋轉(zhuǎn) rotate
rotate 當中接受的時一個旋轉(zhuǎn)角度责语，如45deg贴硫，單位是deg
rotate()中椿每，正值是順時針，負值是逆時針
body:hover div{
transform:rotate(45deg);
}
效果如下圖：
原始狀態(tài).png
hover狀態(tài).png
3英遭、縮放 scale
scale 當中接受的時一個數(shù)值间护，可以是浮點數(shù)，如1.2或者0.3或者2
scale() 中數(shù)值 大于1是放大效果挖诸，小于1是縮小效果
數(shù)值為0時元素徹底消失
body:hover div {
transform:scale(0.5); 縮小至0.5倍汁尺，如下圖所示
}
原始狀態(tài).png
hover狀態(tài).png
4、變形/斜切 skew
skew當中接受的也是一個旋轉(zhuǎn)角度多律，如40deg
skewX()
skewY()
skew(30deg,30deg)第一個值是X軸的斜切角度痴突，第二個值是Y軸的斜切角度
那么說完這四種變換，他們連寫方式是怎樣的呢狼荞？
按照下面這個順序來寫：
body:hover div{
transform:translate(200px,0) rotate(45deg) scale(1.5) skew(15deg,15deg);
}
原始狀態(tài).png
hover狀態(tài).png
學習到此處辽装，我們有沒有想到一個問題，這些變換是基于那個基點進行的呢粘秆？下面我們解釋一個名詞——變換基點
transform-origin
left
top
right
bottom
center
支持負值如迟、正值、百分數(shù)
默認值是center（即50%）攻走，當設(shè)置相應(yīng)的值后殷勘，基點會按照相應(yīng)地設(shè)置的值發(fā)生變換，之后的變換會參照這個基點進行昔搂。
