CSS动画与变形（一）-------transform变形

CSS动画与变形（一）

                                                                          ———变形

一、简介：

CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。借助与位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。

比transition动画功能更强大的是animation动画，animation动画同样可以和位移、旋转、缩放、倾斜这4种几何变换结合，但他可以指定多个关键帧，从而允许定义更加丰富的自定义动画。

二、transform变形

Transform：该属性用于设置变形，该属性支持一个或多个变形函数。向元素应用2D或3D转换。

1. 浏览器支持

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 */

}

 

1. （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);

}

 

1. （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);

}

 

1. （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 轴。