CSS学习笔记（九）过渡模块和2D转换模块

一、过渡模块的基本使用

1、过渡模块三要素：
（1）属性发生变化：

div: hover{
	width: 300px;
}

（2）告诉系统哪个属性需要执行过渡效果

transition-property: width;

（3）告诉系统过渡效果持续时间

transition-duration: 5s;

2、当多个属性需同时执行过渡效果时用逗号隔开即可

transition-property: width,background-color;
transition-duration: 5s,5s;

3、告诉系统延迟多少秒之后才开始过渡漫画：transition-delay: 2s;

4、告诉系统过渡动画的运动的速度：

transition-timing-function: linear(匀速运动)
							ease(逐渐慢下来)
							ease-in(加速)
							ease-out(减速)
							ease-in-out(先加速后减速)

二、过度模块——连写/弹性效果/手风琴效果

1、连写：transition: 过渡属性 过渡时长 运动速度 延迟时间;
（1）和分开写一样，如果想给多个属性添加过渡效果也是用逗号隔开
（2）连写的时候可以省略后面的两个参数，因为只要编写了前面两个参数就已经满足的过渡的三要素
（3）如果多个属性运动的速度/延迟的时间/持续的时间一样，那么就可以简写为transition: all 0s;

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

3、手风琴效果的编写套路
（1）不要管过渡，先编写基本界面
（2）修改我们认为需要修改的属性
（3）再回过头去给被修改属性的那个元素添加过渡即可

三、2D转换模块的基本属性

1、旋转：transform: rotate(45deg);deg为单位，代表度数。

2、平移：transform: translate(100px,0px);第一个参数为水平方向，第二个参数为垂直方向。

3、缩放：tranform: scale(1.5,1.5);第一个参数为水平方向，第二个参数为垂直方向。
（1）如果取值为1，代表不变
（2）如果取值大于1，代表需要放大
（3）如果取值小于1，代表需要缩小
（4）如果水平和垂直缩放一样，则可简写为一个参数

4、注意
（1）如果需进行多个转换，那么用空格隔开
（2）2D转换模块会修改元素的坐标系，所以旋转之后再平移就不是水平平移了

四、2D转换模快——形变中心点/旋转轴向/透视属性/相片墙

1、默认情况下，所有元素都是以自己的中心点作为参考来旋转的，我们可以通过形变中心点来修改它的参考点。
（1）格式：
第一个参数：水平方向；第二个参数：垂直方向
取值：具体像素、百分比、特殊关键字

transform-orign: 200px 200px;
				50% 50%;
				center center;

2、旋转轴向：默认情况下，所有元素都是围绕z轴旋转的
（1）想围绕哪个轴旋转，那么只需在rotate后面加上哪个轴即可。如：x轴transform: rotatex(45deg);

3、透视属性：近小远大（值越大越近）
（1）透视属性必须添加到元素的父元素上面perspective: 500px;