css3动画2D转换和过渡

一、2D转换：transform

它的值有：

1. translate(); 移动

2. rotate() 旋转

3. scale() 缩放

4. skew() 倾斜

5. matrix() 包含旋转，缩放，移动（平移）和倾斜功能。

1.translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

transform: translateX(10px);/*平移x轴距离左边10px*/
transform: translateY(10px);/*垂直上下移动y轴距离上面 10px*/
transform: translate(10px,10px);/*复合属性 第一个值表示x轴 第二个表示y轴*/

2.rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

transform: rotate(20deg);/*表示顺时针旋转20度，负值为逆时针旋转*/
transform: rotateX(20deg);/*表示x轴垂直旋转20度*/
transform: rotateY(20deg);/*表示y轴横向旋转20度 */

3.scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：1为默认大小

transform: scale(2);/*复合属性，第一个值为x轴，逗号隔开第二个值为y轴，写一个值代表两个轴*/
transform: scaleX(3);/*表示x轴放大三倍*/
transform: scaleY(2);/*表示y轴放大两倍*/

4.skew() 方法，倾斜函数，取值是一个度数值

transform: skew(20deg,30deg);/*复合属性，同时x轴、y轴*/
transform: skewX(20deg);/*表示x轴倾斜20度*/
transform: skewY(30deg);/*表示y轴倾斜30度*/

注：skew会改变形状，rotate不会改变

二、css3过渡transition

• transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
• CSS3tranition的过渡更像是一种“黄油”，通过一些css的简单动作出发样式平滑过渡

属性	描述
[transition]	简写属性，用于在一个属性中设置四个过渡属性。
[transition-property]	规定应用过渡的 CSS 属性的名称。
[transition-duration]	定义过渡效果花费的时间。默认是 0。
[transition-timing-function]	规定过渡效果的时间曲线。默认是 "ease"。
[transition-delay]	规定过渡效果何时开始。默认是 0。

transition-timing-function值：

linear   规定以相同的速度开始至结束的过渡效果
ease     规定慢速开始，如何变快，然后慢速结束（默认值）
ease-in  规定慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果