css3 倍数放大,Netconcepts | Css3中的变形神器——Transform

Css3与Css最大的区别就是其增加了很多炫丽的效果，可以帮助站长们将页面更好的呈现。而Css3的炫丽的动画效果主要依靠三个属性来完成。变形(transform)、转换(transition)和动画(animation)。其中transform就是今天要说的重点了。

Transform的变形功能主要分为：旋转rotate、扭曲skew、缩放scale和移动translate。下面一一说明：

Rotate(旋转)：

Rotate方法可以实现指定版块进行任意角度的旋转，使用方法：transform:rotate(角度); 如：transform:rotate(90deg)就表示旋转90度。

Skew(扭曲)

Skew方法表示：将形状按照x轴与y轴进行指定角度的倾斜或扭曲。

使用方法：transform：skew(x轴倾斜角度,Y轴倾斜角度)

示例：transform:skew(30deg,50deg) X轴与Y轴同时扭曲，X轴扭曲30度，Y轴扭曲50度。

Scale(缩放)

Scale方法表示：将版块按等比例放大缩小。

使用方法：transform：scale(放大倍数);

示例：transform：scale(2.0)将版块放大2倍；

注意：放大倍数小数点后保留一位。如放大2倍，参数必须为2.0

Translate(移动)

Translate方法表示：将版块向指定方向移动；

使用方法：transform：translate(左右移动的距离，上下移动的距离)

示例：transform：translate(200px,100px) 将版块向右移动200px,然后向上移动100px。

注意：参数默认是向右和向上2个，如果向左或者向下移动，将参数改为负数即可。如果x轴或者y轴不想移动，标为0即可。

以上所述的4种变形方法如果单独使用只能实现静态变形的效果，需要在配合transition属性时才可以实现动画效果。