说明:
-
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秒开始过渡。