css过渡 动画

css 过渡 动画

图形转换

• css动画： 旋转、平移、缩放、倾斜 ；过渡经常和悬浮事件结合使用。
• transform是转换、变换的意思，旋转、平移、缩放、倾斜都需要使用该属性
• translate平移 可以向xyz三个方向移动 ，x页面水平方向，y页面垂直方向，z与页面垂直方向
  

 transform: translateX(180px) translateY(180px); /*向右和向下平移180px*/
 transform: translate3d(90px,90px,90px); /*向右向下和屏幕向外的方向平移90px*/

• scale是缩放，没有单位；1为原始大小；

transform: scale(0.8);  /* 缩小至0.8倍*/

• rotate是旋转 单位deg 是绕着xyz轴进行旋转 z轴是在网页这个平面旋转