CSS动画与变形（一）-------transform变形
CSS动画与变形（一）
———变形
一、简介：
CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。借助与位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。
比transition动画功能更强大的是animation动画，animation动画同样可以和位移、旋转、缩放、倾斜这4种几何变换结合，但他可以指定多个关键帧，从而允许定义更加丰富的自定义动画。
二、transform变形
Transform：该属性用于设置变形，该属性支持一个或多个变形函数。向元素应用2D或3D转换。
- 浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 需要前缀 -ms-。
2.方法
（1）、translate()位移
translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
translate我们分为三种情况：
①translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
②translateX(x)仅水平方向移动（X轴移动）
③translateY(Y)仅垂直方向移动（Y轴移动）
例：
值 translate(40px,30px) 把元素从左侧移动 20 像素，从顶端移动40 像素。
div
{
transform: translate(20px,40px);
-ms-transform: translate(20px,40px); /* IE 9 */
-webkit-transform: translate(20px,40px); /* Safari and Chrome */
-o-transform: translate(20px,40px); /* Opera */
-moz-transform: translate(20px,40px); /* Firefox */
}
- （2）rotate()旋转
rotate()旋转：旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。
如果这个值为正值，元素相对原点中心顺时针旋转；
如果这个值为负值，元素相对原点中心逆时针旋转。
例：
值 rotate(30deg) 把元素顺时针旋转 30 度。
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
- （3）Scale()缩放
scale()缩放：scale()函数让元素根据中心原点对对象进行缩放。
缩放 scale 具有三种情况：
① scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
②scaleX(x)元素仅水平方向缩放（X轴缩放）
③scaleY(y)元素仅垂直方向缩放（Y轴缩放）
用法：
-transform:scale(0.8);//缩小到原来的0.8倍
-transform:scale(1.2);//放大到原来的1.2倍
例：
值 scale(2,4) 把宽度转换为原始尺寸的1.2 倍，把高度转换为原始高度的 1.2倍。
div
{
transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
-o-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
}
- （4）Skew()扭曲
skew()扭曲：扭曲skew()函数能够让元素倾斜显示。
它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。
skew()函数不会旋转，而只会改变元素的形状。
skew()具有三种情况：
①skew(x,y)使元素在水平和垂直方向同时扭曲
（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
②skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
③skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）;
例：
值 skew(10deg,10deg) 围绕 X 轴把元素翻转 10 度，围绕 Y 轴翻转 10 度。
div
{
transform: skew(10deg,10deg);
-ms-transform: skew(10deg,10deg);
-webkit-transform: skew(10deg,10deg);
-o-transform: skew(10deg,10deg);
-moz-transform: skew(10deg,10deg);
}
（5）matrix()矩阵
matrix()： 是一个含六个值的(m11,m12,m21,m22,dx,dy)变换矩阵，用来指定一个2D变换，相当于直接应用一个[m11 m12 m21 m22 dx dy]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，
我在这里只是简单的说一下CSS3中的transform有这么一个属性值，
如果需要深入了解，需要对数学矩阵有一定的知识。
例：
transform:matrix(1,0,0,1,20,40);
（6）origin()原点
变形--原点 transform-origin:任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。
transform-origin取值和元素设置背景中的background-position取
值类似，如下表所示：
关键字 百分数
top=top center 50% 0
left=left center 0 50%
bottom=bottom center 50% 100%
right=right center 100% 50%
center=center center 50% 50%
top left=left top 0 0
top right=right top 0 100%
bottom left =left bottom 100% 0
bottom right=right bottom 100% 100%
例：
transform-origin: left;
更多方法：
| 函数 |
描述 |
| matrix(n,n,n,n,n,n) |
定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) |
定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) |
定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) |
定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) |
定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) |
定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) |
定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) |
定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) |
定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) |
定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) |
定义 2D 倾斜转换，沿着 Y 轴。 |