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;//第一个参数是宽度，第二个是高度