2D转换
二维坐标系
2D转换之移动translate
可以改变元素在页面中的位置，类似定位
语法：
transform: translate(x,y);
分开写：
transform:translateX(n);
transform:translateY(n);
1.translate最大的优点：不会影响到其他元素的位置
2.translate中的百分比单位是相对于自身元素的translate（50%，50%）；
3.对行内标签没有效果；
2D转换之旋转rotate
2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转
语法：
transform:rotate(度数）
rotate里面跟度数，单位是deg，角度为正时，顺时针；角度为负时，逆时针。默认旋转的中心点是元素的中心点
案例-书写三角
2D转换中心点 transdorm-origin
语法：
transform-origin:x y;
1.后面的参数用空格隔开
2.x y默认转换的中心点是元素的中心点（50% 50%）
3.还可以给x y设置像素或者方位名词（top bottom left right center)
2D转换之缩放scale
语法：
transform:scale(x,y);
注意其中的x和y用逗号分隔
transform:scale(1,1):相当于没有放大和缩小
transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
2D转换综合写法
注意：
1.同时使用多个转换，其格式为：transform:translate() rotate() scale()……等
2.其顺序会影响转换的效果
3.当我们同时有位移和其他属性时，记得要将位移放到最前面
css3动画（animation)
制定动画分为两步：
1.先定义动画
2.再调用动画
用keyframes定义动画（类似定义类选择器）
@ keyframes 动画名称 {
0% {
width:100px;
}
100% {
width:200px;
}
}
1. 0%是动画的开始，100%是动画的完成
2.用百分比来规定变化发生的时间，或用关键词“from"和”to",等同于0%和100%
动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；
简写属性里不包括animation-play-state
暂停动画：animation-play-state:puased;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来：animation-direction:alternate;
盒子动画结束后，停在结束位置：animation-fill-mode:forwards;
3D转换
3D转换的特点：
1.近大远小
2.物体后面遮挡不可见
3D移动translate3d
透视 perspective
transform:translateZ(100px):仅仅是在z轴上移动，有了透视，就能看到translateZ引起的变化了
3D旋转rotate3d
语法
1.transform:rotateX(45deg):沿着x轴正方向旋转45度
2.transform:rotate3d(x,y,z,deg):沿着自定义旋转deg角度
3D呈现transform-style
1.控制子元素是否开启三维立体环境
2.transform-style:flat子元素不开启3d立体空间，默认的
3.transform-style:preserve-3d;子元素开启立体空间
4.代码写给父级，但影响的是子盒子
