transform:translate(x,y);

transform:scale(n)

取值  scale(n)  同时设置x轴和y轴的比例

      scale(x,y) 分别设置x轴和y轴的比例

      scaleX(x)  单独设置x轴的比例

      scaleY(y)  单独设置y轴的比例

            n>1  放大

            n=1  不变

            0<n<1 缩小

            -1<n<0 缩小并反转

            n<-1   放大并反转

transform：rotate(ndeg)

n  + 顺时针  – 逆时针

注意：

1.旋转的转换，会被转换原点影响效果

2.旋转是连同坐标轴一起旋转的，会影响旋转之后的位移方向

transform:skew(ndeg)

1.skew(ndeg)等同于skewX(xdeg)

  让元素向着x轴发生倾斜，实际上改变的是y轴的角度

  值 ndeg 为正     y轴逆时针

           为负     y轴顺时针

2.skewY(ydeg)

  让元素向着y轴发生倾斜，实际上改变的是x轴的角度

  值 ndeg 为正     x轴顺时针

           为负     x轴逆时针

3.skew(x,y)  

02_ex

创建div 200px*200px 背景随意，鼠标悬停时

该元素向右偏移200px,向下偏移200px,旋转135deg,向x轴倾斜45deg

,并且放大1.5倍

面试

使用css，让一个div在任何情况都处于屏幕的中心

模拟人的眼睛到3D转换元素之间的距离

透视距离不同，看到的效果就不同

perspective:px  此属性要写在3D转换元素的父元素上

transform

取值：

1.rotateX(ndeg)

以x轴为中心轴，旋转元素(烤羊腿，老式爆米花机)

2.rotateY(ndeg)

以y轴为中心轴，旋转元素(旋转门，旋转木马)

3.rotateZ(ndeg)

以z轴为中心轴，旋转元素(电风扇，摩天轮)

4.rotate(x,y,z,ndeg)

  x,y,z取值为0，代表不参与旋转

  x,y,z>0,代表参与旋转 

让css的值，在一段时间内平缓的变化

transition-property:

取值  all  所有支持过渡属性都参与

      单独写某个css属性，多个属性间用空格分开

支持过渡的属性：

1.颜色属性

2.大多数取值为具体数字的属性

3.阴影

4.转换

5.visibility

transition-duration: s/ms

指定多长时间完成此次过渡操作

transition-timing-function:

取值：

1.ease  默认值，慢速开始，中间变快，慢速结束

2.linear 匀速

3.ease-in 慢慢开始，一直加速

4.ease-out 快速开始，一直减速

5.ease-in-out 慢速开始，慢速结束，中间先加速再减速

transition-delay:s/ms

写在原来的选择器中，过渡效果有去有回

写在hover中，过渡效果有去无回

transition：property duration timing-function delay;

最简方式：transition:duration;

关键帧

1.动画执行的时间点

2.在这个时间点上的样式

@keyframes 动画名称{

  0%{}

   …

  100%{}

}

1.选中要执行动画的名称

animation-name

2.动画持续时长

animation-duration

3.动画的时间曲线函数

animation-timing-function:ease/linear/ease-in…….

4.延迟执行

animation-delay

animation-iteration-count:

取值  具体的播放次数

      infinite;  无限

animation-direction:

取值 normal 默认值 0%~100%

      reverse 100%~0%

      alternate; 轮流播放，奇数次正向，偶数次逆向

animation:name duration timing-function delay count direction

最简方式

animation:name duration;

animation-fill-mode:

取值：1.backwards 动画播放之前的延迟时间内，显示动画的第一帧

      2.forwards 动画播放结束之后，停留在最后一帧

      3.both; 1和2合体

      4.none 默认值，不填充状态

animation-play-state:

取值  running

      paused;

如果低版本浏览器，想使用动画，需要在动画声明的时候添加前缀

@keyframes 动画名称{}

@-webkit-keyframes 动画名称{}

@-o-keyframes 动画名称{}

@-ms-keyframes 动画名称{}

@-moz-keyframes 动画名称{}

项目中，一般使用第三方动画库animate.css

1.下载animate.css

2.在页面中导入

3.调用动画名称

css优化的目的

1.减少服务器的压力

2.提升用户体验

尽量减少http的请求个数  

在页面的顶部，引入css文件

将css和js写在外部单独的文件中

合并样式(能写群组，就不单写，能用简写，就不单独定义属性)

缩小样式文件的大小(能重用的尽量重用，减少样式重写)

避免出现空的href和src

代码压缩    

由于不同浏览器，对html元素的默认样式解析不同

我们在开发css之前，把大多数默认样式统一重置(格式化)

然后再写代码。这个行为叫做css  reset

是css reset的一种优质的替代方案

css reset 太激进，太暴力

normalize.css比较温和