CSS平移动画

CSS优化
1、转换
1、什么是转换
转换即改变元素的一些状态，大小、位置、形状
可以是2d转换，也可以是3d的转换
2d : 使元素在 x轴和 y轴上发生变化
3d ：2d基础上增加了 z轴的变化
2、转换属性
CSS3转换属性:
transform : none / transform-function;
none:不转换，默认值
transform-function：表示要实现转换的函数
旋转：rotate()
位移：translate()
缩放：scale()
倾斜:skew()
transform:rotate(); -- 旋转操作
3、转换原点：
转换原点：即转换过程中围绕的中心点。
默认情况下，原点是在整个元素的中间处
更改转换原点：
transform-origin:
取值 ：
数值 ：以元素左上方的点为(0,0)，再去计算其他点
百分比:
0% , 0% : 左上方的点
50% ， 50% ：元素的中心点
关键字:
left
right
top
bottom
center
left top : 表示左上方
transform-origin赋值：
一个值 ：x轴的移动
两个值 ：x轴和y轴
三个值 ：x轴，y轴，z轴
2、2D转换 - 位移
位移：位置移动
从当前元素的位置处，移动到指定坐标轴位置处
函数：
translate(x,y)
translate(value);
取值
数值、百分比
去负值
x ：正 向右移动
负 向左移动
y : 正 向下移动
负 向上移动
单方向位移：
translateX(x)
translateY(y)
3、2D转换 - 缩放
缩放：改变元素大小
函数：scale(value)
scale(x,y)

取值：
默认值 1
缩小