transform實現元素的移動、縮放、旋轉、變形
既然用到了transform就先說說這個屬性吧！
一、transform屬性簡介
Transform屬性應用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。現在暫時先說說屬性和2D的轉換吧！3D學習的成本，需要設備的性能和瀏覽器支持來支撐！所以先介紹3D的效果。
用法：transform:translate(-50%,-50%)
| 值 | 描述 |
|---|---|
| translate(x,y) | 定義 2D 移動。x爲左右移動，y爲上下移動！可以爲負值，單位px，百分比，em等 |
| scale(x,y) | 定義 2D 縮放。x爲寬度的縮放，y爲高度的縮放！值爲數值，0-n倍，小於1是縮小 |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。0-360度，單位deg |
| skew(x-angle,y-angle) | 定義沿着 X 和 Y 軸的 2D 傾斜轉換。簡單點相當於PhotoShop裏面的斜放屬性，基本很少用到 |
二丶介紹下他們的使用情況吧
首先，先寫個字體出來吧！就一我上一篇介紹的火焰字好了！上篇的代碼對這篇的代碼不會有干擾的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小效果</title>
<style type="text/css">
/*通配符重置瀏覽器默認的兩個值，
對本文沒有太大影響，不知道可以無視*/
*{
margin: 0;
padding: 0;
}
.div1{
width: 300px;
height: 100px;
padding-top: 20px;
line-height: 100px;
margin:200px auto 0;
text-align: center;
font-size: 40px;
font-weight: bold;
font-family: "華文行楷";
background: #000;
color:#F60;
text-shadow: 0px 0px 2px #fff,
0px -3px 3px #1EB,
0px -6px 4px #01DEFD,
0px -9px 5px #0BF,
0px -12px 6px #08F;
}
</style>
</head>
<body>
<div class="div1">超炫火焰字</div>
</body>
</html>效果如圖：
1.translate值的作用
我們在text-shadow後面添加一個transform屬性先是移動吧！
transform:translate(20%,0);我們就會發現這個div被右移動了20%
這個20%是對於這個div來說的；也就是說移動的這個div的百分之20%，60px的距離
在這裏我提一句就是絕對定位的問題，當元素添加如下屬性時
position: absolute;top: 50%;transform: translate(0,-50%);那麼這個元素就會相對於祖先有設有position屬性的垂直居中定位了，如果先輩沒有設有position屬性就會相對屏幕垂直居中了
對於translate這個值的負值玩法，上下移動就由你們去嘗試咯
2.scale值的作用
我們在將translate改爲scale吧！代碼如下
transform:scale(1.2,0);我們就會發現這個div被拉伸了1.2
這個1.2是對於這個div來說的；也就是說的這個div的寬度被拉長了，寬度變爲了原來的1.2倍
這個scale常常被用到購物商城的鼠標移進時圖片被放大的效果裏，並且不會對原來的佈局產生任何變化和影響
對於scale這個值的負值玩法，拉伸成啥樣子就由你們去嘗試咯
3.rotate值的作用
我們在將scale改爲rotate吧！代碼如下
transform:rotate(45deg);我們就會發現這個div被旋轉了45度
旋轉的原點爲div盒子的中心點，設置了45deg就旋轉了45deg
對於rotate這個值的負值玩法，其實360deg就旋轉了一圈，相當於回到了原位即相當於0deg了，負值就是向左方向旋轉了
4.skew值的作用
這個值的是扭曲，斜視某個對象而已，很少用到，就不做介紹了