CSS3 2D Transform

位移translate()函数

结合起来，translate()函数移动元素主要有以下三种移动：

• 水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；
• 垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty);
• 对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。

translate只有一个值的时候默认为translate(tx 0)

缩放scale()函数

缩放scale()函数和translate()函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。

在scale()函数中，取值除了可以取正值之外，同时还可以取负值。只不过取负值时，会先让元素进行翻转，然后在进行缩放。

scale()函数对元素进行缩放时，都是以元素的中心为基点，但可以通过transform-origin来改变元素的基点。

但是，要小心，如果你将值设置为“0”时，元素将会消失。我想，如果没必要，你是不会这样做的。当我们仅给scale() 函数只显式设置一个值时，会使对象成正比例放大或缩小。如果需要将对象在X轴和Y轴两个方向设置不同的值。

 

scale()函数和translate()函数极其相似，除了能通过scale()函数使用元素水平方向和垂直方向同时缩放（也就是元素沿X轴和Y轴同时缩放）之外，也可以使元素仅沿着X轴或Y轴方向缩放：

• scale(sx)
• scale(sx,sy)
• scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
• scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。

 

旋转rotate()函数

rotate()函数的使用很简单，其基本语法如下：

rotate(a);

rotate()函数只接受一个值，

a：代表的是一个旋转的角度值。其取值可以是正的，也可以是负的。如果取值为正值时，元素默认之下相对元素中心点顺时针旋转；如果取值为负值时，元素默认之下相对元素中心点逆时针旋转。

在默认之下，rotate()函数旋转元素是相对于元素中心点进行旋转，同样，我们可以通过transform-origin属性重置元素的旋转原点：

div img:nth-child(2){ z-index: 2; transform-origin: top left; transform: rotate(45deg); }

倾斜skew()函数

倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

skew(ax)

或者

skew(ax,ay)

其属性值说明如下：

• ax：用来指定元素水平方向（X轴方向）倾斜的角度。
• ay：用来指定元素垂直方向（Y轴方向）倾斜的角度。如果未显式的设置这个值，其默认为０。