过渡动画：

css3都有哪些新增的东西 : 过度，动画，阴影，圆角；

例题：transition ：border-radius 500ms ease 5s,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s

1

**规定过度效果的曲线，默认是 ease; 多个用 ，(逗号)隔开，

过度属性 : transition;

圆角 : border - radius ,

全部的话就用默认 transition : all is ease;

都有几种常规的：

transition : all is linear . 匀速；

transition : all is ease . 开始和结束慢速，中间加速；

transition ：all is ease - in . 开始的时候慢，越来越快，然后停止；

transition : all is ease - out . 开始时快，越来越慢，然后停止；

transition : al is ease-in -out .开始和结束时慢速。。。。

如果子元素超出父元素时 : overflow : hidden;

rgba(0 ,0, 0,0.5 );半透明；

line-height 行高；margin : 20px,间距20px,info信息

tansfrom 变形：

缩放、 旋转 、斜切 、位移：

2

元素旋转：

transfrom : rotate(45deg) 默认是沿着z轴旋转；

transfrom : perspective(800px ) rotate(45deg)

perspective 设置透视距离，经验数 800px ，比较符合人眼的透视距离；

transfrom -style ： perseve-3d ,设置盒子按3d空间显示；

3 4

变形中间点

div : nthchild{} ;第几个孩子；

transfrom-origin:left center, 设置变形的中心点 (左中)；

transfrom-origin:left top,设置变形的中心点 (左上)；

背面可见

margin : 上，右，下，左，

如果不想变的话 加过度 transfom:all 500ms ease;

800是经验值 起始角度 rotatey (0deg);

有透视效果 transfrom -style : preserve -3d;

设置盒子背面是否可见

backface - visibity : hidden; 背面不可见 （隐藏不可见）；

图片翻面时另一张图片

animation 动画

5

运动遮罩：

6

在父类中要把父类一下的遮盖住用 ：overflow