transform的使用方法

transform的含义是：改变，使…变形；转换

在排版当中去合理的使用transform会使我们的排版看起来高大上那么一点。

接下来给大家介绍一下这个神奇的小东西都有什么属性会有什么效果。

rotate：通过指定的角度参数对原元素指定一个效果。

如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg)；

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

如：transform:translate(100px,20px):

缩放scale和移动translate是有点相似的，也是有三种情况：下面我们具体来看看这三种情况具体使用方法：

注意：默认值是1，它的值放大是比1大，缩小比1小。

1、scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。

如：transform:scale(2,1.5)

。

2、scaleX( n ) 定义 2D 缩放转换，改变元素的宽度。

如：transform:scaleX(2):

3、scaleY( n ) 定义 2D 缩放转换，改变元素的高度。

如：transform:scaleY(2):

1、skew( x-angle , y-angle ) 定义 2D 倾斜转换，沿着 X 和 Y 轴。

如：transform:skew(30deg,10deg)

2、skewX( angle ) 定义 2D 倾斜转换，沿着 X 轴。

如：transform:skewX(30deg)

3、skewY( angle ) 定义 2D 倾斜转换，沿着 Y 轴。

如：transform:skewY(10deg)

matrix(, , , , , ) ： 以一个含六值的(a,b,c,d,e,f) 变换矩阵 的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵。

改变元素基点 tranform-origin

一个元素的多重transform\x0d\x0a就像这样：\x0d\x0a-webkit-transform: rotate(360deg) scale(2)\x0d\x0a你还可以在分号之前加上translate(1em,0)，用空格隔开。\x0d\x0a多拉A梦的Transform\x0d\x0a在多拉A梦的CSS中的transform只用了rotate\x0d\x0a例如#head_light中的\x0d\x0a-webkit-transform: rotate(20deg)\x0d\x0a-moz-transform: rotate(20deg)\x0d\x0a-o-transform: rotate(20deg)\x0d\x0a-o-transform应该是Opera有效。

---