#CSS core #转换 #动画 #优化 #reset #normalize

2D转换

位移 translate：
transfrom :translate(v1)  /*x 轴偏移*/
transfrom :translate(v1,v2)   /*v1是x轴偏移,v2是y轴的偏移*/
transfrom :translatex(v1) /*单独设置y轴偏移*/
缩放 scale：
transform :scale(v1)   /*一个值设置x轴和y轴的大小  倍数*/
transform :scale(x,y)  /*单独设置缩放比例*/ 
transform :scalex(x)   /*单独设置x的缩放*/
transform :scaley(y)   /*单独设置y的缩放*/
旋转 rotae：
transform:rotae(ndeg);  /*+顺时针   -逆时针*/
transform-origin:x y;   /*left center right top bottom px %都可以 默认center
/*旋转是带着坐标轴一起转，会影响旋转之后的位移方向cener*/
倾斜 skew:
transform :skewx(ndeg)  /*让y轴向x轴倾斜*/
transform :skewy(ndeg)  /* 让x轴向y轴倾斜*/
transform :skew(xdeg,ydeg) /*同时设置*/

3D转换

透视距离 必须设置在3D转换元素的父元素上
perspective:0px;  

子元素设置3D转换：
transform:rotatex(ndeg)   以x轴为中心轴旋转  
transform:rotatey(ndeg)   以y轴为中心轴旋转  
transform:rotatez(ndeg)   以z轴为中心轴旋转
transform:rotate3d(x,y,z,ndeg)

过渡

过渡property:
transition-property:属性1 属性2 属性3 .. all所有支持的过渡属性都参与
支持的属性：颜色  数值为数字的属性 阴影 转换

持续时长duration:
transition-duration:s/ms  

事件曲线函数timing-function:
transition-timing-function:ease 默认
transition-timing-function:linear 匀速
transition-timing-function:ease-in  慢开始 一直加速
transition-timing-function:ease-out 块开始 一直减速
transition-timing-function:ease-in-out 慢开始 急加速 急减速 慢结束

过渡的延迟事件delay:
transition-delay:s/ms  

简写方式:transition:property  duration  timing-function  delay;
/*如果把过渡编写在伪类选择器中，过渡效果有去无回  一般都写在原始样式中，过渡效果又去有回*/

动画

定义动画：
animation-name  :设置要使用的动画名称;
animation-duration :设置动画持续事件;
animation-timing-function:linear  设置动画时间曲线函数
animation-delay:2s; 设置动画延迟

动画的特有样式属性：
执行的次数：animation-iteration-count:infinite 取值数字 infinite无限
动画的顺序播放：animation-direction:normal 默认  reverse 100%~0% 
简写方式: animation:name duration timing-function  delay  count  direction;

css优化

1.优化的目的：减少服务器端的压力 提升用户体验
2.原则：尽量减少http请求个数 （缓存 精灵图）
3.css：代码优化 合并样式 尽量写简写方式 避免出现src和href 
4.代码压缩

css reset

不同浏览器对同一份样式的解析不同，我们在开发之前需要把不同的默认样式进行统一
进行统一：
		 1.清除     *{margin:0;padding:0}
         2.统一设置成一套值
css reset没有标准，只要符合你的项目需求就是对的
css reset特点，把元素默认的语义也清空了

normalize.css

css reset一种方案，有标准代码
修改了不同浏览器的bug，添加不同浏览器的兼容性