css3新特性 过渡 动画 2d 3d转换

过渡
过渡三要素：
1.必须要有属性发生变化 如：width background等
2.必须要告诉系统哪个属性需要执行过渡效果：transition-property:width,background;
3.必须告诉系统过渡效果的持续时长：transition-duration:5s,5s;
transition-delay//告诉系统延迟多少秒才执行过渡效果
transition-timing-function://告诉系统在执行时的速度，见下图



过渡模块的连写：
transition:过渡属性 过渡时长 运动速度 延迟时间；
过渡连写的注意点：
1.和分开写一样，如果想给多个属性添加过渡效果添加逗号即可。
2.连写的时候，可以省略后面的两个参数，只要满足了前面2个参数，就一定会有过渡效果。
transition:all 5s;//所有的属性都要有过渡效果。

过渡模块--弹性效果
编写过渡的套路
1.不要管过渡，先编写基本页面
2.修改我们认为需要修改的属性
3.再回去给被修改属性的那个元素添加过渡即可

2D
transform
transform:rotate(50deg)
默认情况下所有的元素都是以自己的中心点作为参考来旋转的，我们可以通过形变中心点属性来修改它的参考点。
transform-origin：200px,0px;
第一个参数：水平方向
第二个参数：垂直方向
注意点：
取值有三种形式：具体像素，百分比，特殊关键字
transform:rotateZ(45deg);//默认情况下所有元素都是围绕着z轴进行旋转
transform:rotateX(45deg);//围绕x旋转
总结：想围绕哪个轴转，只需要在rotate加上哪个轴即可
perspective：500px；//1.透视：近大远小  2.一定要注意，透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
transform：scale(1.5);//放大1.5倍

如何给盒子添加阴影
box-shadow：水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影；
//盒子的阴影分为内外阴影，默认情况下就是外阴影
//快速添加阴影只需要编写三个参数即可
box-shadow：水平偏移 垂直偏移 模糊度；

//默认情况下阴影的颜色和盒子内容的颜色一致

如何给文字添加阴影
text-shadow：水平偏移 垂直偏移 模糊度 阴影颜色；

动画：
过渡和动画的异同：
1.不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就看看执行动画
2.相同点
过渡和动画都是用来给元素添加动画
过渡和动画都是系统新增的属性
过渡和动画都需要满足三要素才会有动画效果
动画







3D
transform-style：preserve-3d
translateZ(200px);//向外移动200px
//1.动画中如果有和默认样式同名的属性，会覆盖默认样式中同名的属性
//2.在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面

背景相关
//背景尺寸属性是css3中新增的一个属性，专门用于设置图片大小
background-size：200px 100px;//第一个参数是宽度，第二个是高度