說明:
-
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行移動(translate)、旋轉(rotate)、縮放(scale)或傾斜(skew)
-
transition屬性用於對css屬性定義動畫效果；
使用:
1. translate(x軸位移，y軸位移) - 元素沿X軸、Y軸進行平移; 正值-右下方移動，負值-左上方移動
div
{
margin:30px;
width:200px;
height:100px;
background: red;
transform:translate(80px, 80px)
}
平移前后對比
=> 
2. translateX(x軸位移) - 元素沿X軸進行平移；正值-右方移動，負值-左方移動
div
{
margin:30px;
width:200px;
height:100px;
background: red;
transform:translateX(80px)
}
平移前后對比
=> 
3. translateY(y軸位移) - 元素沿Y軸進行平移；正值-下方移動，負值-上方移動
div
{
margin:30px;
width:200px;
height:100px;
background: red;
transform:translateY(80px)
}
平移前后對比
=> 
4. rotate(旋轉角度) - 元素以圖形中心點為旋轉中心，正值-順時針旋轉；負值-逆時針旋轉；
div
{
margin:30px;
width:200px;
height:100px;
background: red;
transform:rotate(15deg)
}
旋轉前后對比
=> 
5. scale(X軸縮放倍數，Y軸縮放倍數) - 基於原來的位置進行伸縮變換，其中x代表沿X軸的伸縮倍數，y代表沿Y軸的伸縮倍數；0~1: 縮小；> 1：放大；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform:scale(1.2,1.6)
}
縮放前后對比
=> 
6. scaleX(X軸縮放倍數) - 基於原來的位置對X軸進行伸縮變換，Y軸不變；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform:scaleX(1.4)
}
縮放前后對比
=> 
7. scaleY(Y軸縮放倍數) - 基於原來的位置對Y軸進行伸縮變換，X軸不變；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform:scaleY(1.4)
}
縮放前后對比
=> 
8. skew(X軸扭曲角度，Y軸扭曲角度) - 沿着X軸和Y軸進行2D傾斜；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform: skew(30deg, 10deg)
}
縮放前后對比
=> 
9. skewX(X軸扭曲角度) - 沿着X軸進行2D傾斜,Y軸不傾斜；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform: skewX(30deg)
}
縮放前后對比
=> 
10. skewY(Y軸扭曲角度) - 沿着Y軸進行2D傾斜,X軸不傾斜；
{
margin:30px;
width:200px;
height:100px;
background: red;
transform: skewY(10deg)
}
縮放前后對比
=> 
11. transition(css屬性 動畫時間 過渡方式 延時時長) - 延長固定時長之后，將元素的css屬性以某種過渡的方式執行動畫，在動畫時間內；
div
{
transition: width 2s, height 2s, transform 2s linear 2s;
}
// 表示同時過度寬度 高度 和 transform 過渡時間為2秒 過度方式為勻速 延時2秒開始過渡。