CSS3新增

2D转换

transfrom:

• 缩放：scale（x,y） 一个参数的话是放缩相同倍数  sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子（相对于修改宽高而言：宽高修改之后会影响其他盒子）

• 移动：translate（x,y）==  translateX（）/translateY （） ||  百分比缩放是相对元素自身大小    ||  并且不会影响其他元素的位置

• 旋转：rotate( 360deg ) // 单位是deg=度  // 正参数顺时针，负参数逆时针 || 默认按元素的中心点旋转  || 

• 倾斜：skew 

• 综合写法：transform: translate() rotate() scale() ...等（空格隔开多个转换）||  其顺序会影转换的效果。（先旋转会改变坐标轴方向） 

transfrom-origin:(x y) || 两个参数用空格隔开 || 可以给x y 设置 像素 或者 方位名词 （top bottom left right center）

——————————————————————————————————————————

3D转换  

• x轴 水平向右 注意： x 右边是正值，左边是负值

• y轴 垂直向下 注意： y 下面是正值，上面是负值

• z轴 垂直屏幕 由屏幕里面指向屏幕的外面 注意： 往外面是正值，往里面是负值

语法： translate3d   //    rotate3d

1. transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离

2. translform:translateX(100px) 仅仅是移动在x轴上移动

3. translform:translateY(100px) 仅仅是移动在Y轴上移动

4. translform:translateZ(100px) 仅仅是移动在Z轴上移动

pe'rspective（透视） 添加给需要开启3D模式元素的父元素上 

 /* 让子元素保持3d立体空间环境 */    transform-style: preserve-3d;

——————————————————————————————————————————

动画 anmiation 

animation：动画名称（必写） 持续时间（必写） 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态;

• @kayframes: 规定动画

• animation  所有动画属性的简写属性，除了animation-play-state属性

• animaition-name 规定@keyframes的名称

• animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0

• anmiation-timeing-function 规定动画的速度曲线 默认是ease / linear： 匀速

• animation-delay 规定动画合适开始，默认是0

• animation-iteration-count 规定动画呗播放的次数，infinite

• animation-direction 规定动画是否在下一周期逆向播放 默认normal ， altermate 逆播放

• animation-play-state 规定动画是否正在运行或暂停。默认是running  还有paused 

• animation-fill-mode 规定动画结束后状态，保持forwards 回到起始backwards