关于CSS过渡与2D转换的学习整理

过渡是网页内的元素从一种形式转变到另一种形式的动态过程，使用过渡功能即可实现动态的变化效果。
过渡需要使用transition属性，举例一个过渡效果如下

<style> 
div{width:100px;height:100px;background:red;transition:width 2s;}
div:hover{width:300px;}
</style>

红色方块初始宽度是100px，在鼠标移到方块上时宽度变为300px。如果不加上过渡效果，这种变化就会是瞬间性的。代码中添加了transition:width 2s；意为宽度的变化在2秒内逐渐实现，因此会产生上图中的动态效果。
（注意：过渡代码不能写与:hover上）
（注意：必须写出过渡的具体时间，否则默认值是0而不生效）
transition-property : 规定设置过渡效果的CSS属性的名称。all ( 默认值 ) , 指定 width , height
transition-duration : 规定完成过渡效果需要多少秒或毫秒。需要添加单位：s (秒) ms (毫秒) 1s == 1000ms
transition-delay : 定义过渡效果何时开始。2s : 延迟两秒进行过渡 -2s : 提前两秒进行过渡
transition-timing-function : 规定速度效果的速度曲线。
运动形式：加速、减速、匀速… linear、ease（默认值）、 ease-in、 ease-out、 ease-in-out
几种值的变化趋势如下图
除了自身宽高的变化，CSS还提供了其他几个变化属性，这里列出几个2D转换，需要用到transform属性
（tranform-origin表示基点位置，主要是针对旋转和缩放，默认都是中心点为基点）
translate：位移的变化，具体写法为transform:translate(100px,100px)，即x轴水平方向右移动100像素，y轴垂直方向向下移动100像素。也可以分开设置x轴与y轴，如transform:translateX(100px); transform:translateY(100px);

rotate：旋转的变化，具体写法为transform:rotate(num)，num是旋转的角度，可用角度deg或弧度rad。如transform:rotate(30deg)表示顺时针旋转30度，如果是负值则表示逆时针旋转。关于旋转，如果单独设置x轴或y轴则为3D方法，2D默认值是z轴。

skew：斜切的变化，具体写法为transform:skew(num1,num2) : num1和num2都是角度，针对的是x轴 和 y轴。也可以分开设置角度，如transform:skewX(30deg) 、 transform:skewY(30deg)
（注：skew没有3d写法）

scale：缩放的变化，具体写法为transform:scale(num)，num是一个比例值，正常比例是1
也可以这样写，transform:scale(num1 , num2)两个值分别对应宽度width和高度height
当然也可以分开设置，transform:scaleX()， transform:scaleY()， transform:scaleZ() ( 3d写法 )

注：所有的变形操作，都不会影响到其他元素。(类似于相对定位)
注：变形操作对inline(内联元素)不起作用的。
注：transform可以同时设置多个值。
先执行后面的操作，在执行前面的操作。
位移会受到后面要执行的缩放、旋转和斜切的影响。