1 转换

转换定义
使元素改变形状、尺寸和位置的效果，可以对元素应用2D或3D转换进行旋转、缩放、移动或倾斜；(改变元素在页面中的位置、大小、角度和形状)
2D转换：使元素在X轴和Y轴平面上变化，改变其形状、尺寸和位置
3D转换：增加z轴的效果，网页中不存在3D，模拟效果
转换属性
transform属性向元素应用2D或3D转换，取值：
none：默认值，表示元素不进行转换
transform function：一个或者多个转换函数，以空格分开；Eg. transform:rotate(90deg) scale(0.8);
转换原点
transform-origin指定元素原点位置，默认原点在元素中心店或者x轴和Y轴的50%处；
transform-origin：数值/百分比/关键字；
一个值表示所有轴的位置；
两个值表示X轴和Y轴；
三个值表示X轴Y轴和Z轴的位置

2D位移
translate()方法将元素从其当前位置移动
translate(x)指定元素在x轴上移动位置；
translate(x, y)指定元素在x和y的移动位置
translateX(x)指定X轴位移
translateY(y)指定Y轴位移
2D缩放
scale(value)方法用于等比例改变元素的尺寸，默认为1，绝对值大于1放大，小于1缩小；负数表示反转；
scale(x,y)分别代表x轴和Y轴的缩放比例；
单向缩放函数scaleX()scaleY()
2D旋转
rotate()方法用于旋转元素，改变元素在页面中的角度
根据圆点顺时针旋转给定的角度，负值表示逆时针旋转
旋转原点会影响旋转效果，旋转连同坐标轴一起旋转，会影响之后的位移效果
2D倾斜
skew()方法用于倾斜元素，以原点位置围绕X轴和Y轴按照一定角度倾斜，可能会改变元素形状，取值为角度。skew(x)向x轴倾斜，实际改变y轴角度；skew(x, y)
单向倾斜函数：skewX(x)正数表示逆时针方向倾斜，skewY(y)正数表示顺时针方向倾斜

perspective属性
属性定义3D元素距视图的距离，单位px；只影响3D转换元素，子元素获得透视效果而不是定义的元素本身。
浏览器兼容性：Chrome和Safari支持-webkit-perspective
3D位移
改变元素在Z轴的位置，主要包含translateZ(z)，translate(x, y ,z)
3D旋转
rotateX(deg)以x轴为中心轴，旋转元素的角度
rotateY(deg)以Y轴为中心轴，旋转元素的角度
rotateZ(deg)以Z轴为中心轴，旋转元素的角度
rotate3d(x, y, z, deg)xyz为0表示不参与旋转
3D缩放
scaleZ(z)
scale3d(x, y, z)

2 过渡

过渡属性写在元素声明的样式中有去有回；写在触发的操作(:hover等)中有去无回

过渡属性transition-property
属性规定应用过渡效果的CSS属性名称；
transition-property:none/all/property;
all表示所有可过渡的属性都使用过渡效果
可以设置过渡的属性：
1）颜色属性
2）取值为数值的属性
3）转换属性
4）渐变属性
5）阴影属性
6）visibility属性
过渡时间transition-duration
过渡的持续时长，以s/ms为单位的数字，默认值为0；
过渡函数transition-timing-function
过渡时间曲线函数，取值：
linear匀速
ease默认值，慢快慢
ease-in慢加速
ease-out快减速
ease-in-out加速减速
过渡延迟transition-delay
规定过渡效果在元素属性值改变后多久开始执行过渡效果(s/ms)
简写属性transition
用于设置四个过渡属性
transition: property duration timing-function delay;最少也要包含duration属性
多过渡效果
设置多个过渡子属性，不同属性值之间用逗号隔开

动画子属性
1. animation-name：调用动画，规定需要绑定到选择器的keyframe的名称
2. animation-duration：动画完成一个周期需要的时间，取值为数值，单位s/ms
3. animation-timing-function：规定动画的速度曲线，取值为预定义函数——linear、ease、ease-in、ease-out、ease-in-out；也可以为贝塞尔曲线
4. animation-delay：播放之前的延迟时间，取值为数值，单位s/ms
5. animation-iteration-count：播放次数，取值数值或者infinite无限播放
6. animation-direction：动画播放方向，默认取值normal，reverse逆向播放，alternate轮流播放，即奇数次正常播放，偶数次向前播放
animation属性
用于控制动画，调用@keyframes定义的动画并设置属性：
animation: name duration timing-function delay iteration-count direction
animation-fill-mode属性
规定动画在播放之前或之后的动画效果是否可见，取值：
none不改变默认行为
forwards动画完成后保持最后一个关键帧
backwards动画播放前在延迟时间内保持第一个关键帧
both同时应用forwards和backwards
animation-play-state属性
规定动画正在运行还是暂停，结合JavaScript代码实现暂停播放，可取值paused和running
动画与过渡
过渡用于制作简单的动画，动画制作复杂的动画，且控制更精确

CSS优化概述
减轻服务器压力，缩短服务器响应时间，提高用户的体验
CSS优化原则
1）尽量减少HTTP请求个数：CSS sprites合并多个背景图像到一个图像，通过background-image和background-position进行调整；Images maps结合多个图像到一个图像，总体规模大致相当，但减少HTTP请求的数量能加快页面显示的速度；
2）页面顶部引入css文件：样式表放在头部，允许页面逐步呈现，可以提高页面加载速度；
3）把CSS文件和JS文件放到外部独立的文件中：页面引入外部文件将由浏览器缓存，后续页会使用缓存
CSS代码优化
1）合并样式：利用CSS继承，提前定义统一的样式，使用群组；
2）缩小样式文件：使用简写属性
3）选择更优的样式属性值
4）减少样式重写：使用reset，并非全局reset，类似针对性清除边距
5）代码压缩：：使用yuicompressor工具压缩CSS代码
6）不在HTML中缩放图像，图像在网络传输中保持原来图像字节数
7）避免空的src和href=""