transform：设置变形，参数如下
translate（tx，【ty】）：横向偏移tx距离，纵向偏移ty距离，其中ty可以省略，默认为0
translateX（tx）：设置html组件横向偏移tx距离
translateY（ty）：设置html组件纵向偏移ty距离
scale（sx，sy）：设置html组件缩放比例
scaleX（sx）：相当于scale（sx，1）
scaleY(sy)：相当于 scale（1，sy）
rotate（angle）：设置html组件顺时针转过angle角度单位为：deg
skew（sx，【sy】）：设置html组件沿x轴倾斜sx角度，沿y轴倾斜sy角度
skewX（sx）:沿x轴倾斜sx角度，
skewY（sy）：沿y轴倾斜sy角度
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: #0f0;
margin: 10px auto;
border-radius: 25px;
position: relative;
}
.a1{
transform: translateX(100px);
}
.a2{
transform: scale(0.5,0.5);
}
.a3{
transform: rotate(300deg);
transition-duration:all 1s；
}
.a4{
transform: skewY(-40deg);
}
</style>
</head>
<body style="background: paleturquoise;">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
</body>
</html>
transform-origin：设置形变的中心点
left：指定旋转中心点位于html组件的左边界
top：指定旋转中心点位于html组件的上边界
right：指定旋转中心点位于html组件右边界
bottom：指定旋转中心点位于html组件下边界
center：指定旋转中心点位于html组件的中间
长度值：指定旋转中心距离左边界，右边界的长度
百分比：指定旋转中心点位于横向纵向的百分比位置
transition属性：
transition-property：指定对html元素的那个css属性进行平滑处理
background-color、width、height、all等各种标准css属性
transition-duration：指定属性平滑渐变持续时间
transition-timing-function：指定渐变速度，该属性支持以下几个值
ease：动画开始比较慢，然后速度加快，到达最大值之后变慢
linear：线性速度，动画开始时的速度到结束时的速度保持不变
ease-in：动画开始时慢，然后加速
ease-out：动画开始较快，然后减慢
ease-in-out：动画开始比较慢，然后速度加快，到达最大值之后变慢
cubic-bezier（x1,y1,x2,y2）：通过贝塞尔曲线来控制动画速度，该属性代替上面五个属性
transition-delay：指定延迟时间，也就是经过指定时间后才开始动
animation动画序列
animation-name：指定动画名称，该属性指定一个已有的关键帧定义
animation-duration：指定动画持续时间
animation-timing-function：指定动画的变化速度
animation-delay：指定动画延迟多长时间才开始执行
animation-iteration-count：指定动画循环次数
animation：是一个复合属性，该属性格式为animation-name、animation-duration、animation-iteration-count、 animation-delay、animation-iteration-count
animation-name语法格式
keyframes关键帧名称{
from|to|百分比{
属性1：值1；
属性2：值2；
}
}
from|to|百分比定义关键帧位置，from代表开始处；to代表结束处，百分比指定关键帧出现位置
