CSS3 2D Transform

CSS3 2The D transformation function allows for2transform elements in D space.

elements2D transformation

Using CSS3 2D transformation function, you can perform basic transformation operations on elements in two-dimensional space, such as moving, rotating, scaling, and skewing.

Transformed elements do not affect surrounding elements, but can overlap like absolutely positioned elements. However, transformed elements still occupy space in the layout at their default position (not transformed).

Using CSS transformations and transformation functions

CSS3 The transform attribute uses transformation functions to manipulate the coordinate system used by the element, so that transformation effects can be applied.

The following sections describe these transformation functions:

translate() function

To move an element from its current position to a new position along the X and Y axes, you can use translate(tx, ty). If ty is not specified, it is assumed to be zero.

img {
　　　　-webkit-transform: translate(200px,　50px);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform: translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform: translate(200px,　50px);　　　　　　
}

translate(200px, 50px) This feature moves the image horizontally along the positive x-axis200 pixels, and move vertically along the y-axis50个像素。

0 pixels.

rotate() function-rotate() function rotates the element around its origin (by transform

img {
　　　　-webkit-The origin attribute specifies) to rotate the element by the specified angle. It can be written as rotate(a).30deg);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-The origin attribute specifies) to rotate the element by the specified angle. It can be written as rotate(a).30deg);　　/*　Firefox　*/
　　　　　　　　-ms-The origin attribute specifies) to rotate the element by the specified angle. It can be written as rotate(a).30deg);　　/*　IE　9　*/
　　　　　　　　　　　　The origin attribute specifies) to rotate the element by the specified angle. It can be written as rotate(a).30deg);　　　　　　
}

transform: rotate(3rotate(30deg)This function rotates the image clockwise around its origin

0 degrees. You can also use negative values to rotate the element counterclockwise.

scale() function

img {
　　　　-webkit-The scale() function increases or decreases the size of the element. It can be written as scale(sx, sy). If sy is not specified, it is assumed to be equal to sx.1.5transform: scale(　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-The scale() function increases or decreases the size of the element. It can be written as scale(sx, sy). If sy is not specified, it is assumed to be equal to sx.1.5transform: scale(　　/*　Firefox　*/
　　　　　　　　-ms-The scale() function increases or decreases the size of the element. It can be written as scale(sx, sy). If sy is not specified, it is assumed to be equal to sx.1.5transform: scale(　　/*　IE　9　*/
　　　　　　　　　　　　The scale() function increases or decreases the size of the element. It can be written as scale(sx, sy). If sy is not specified, it is assumed to be equal to sx.1.5transform: scale(　　/*　Modern Browsers　*/　　　　
}

);1.5scale(1.5times. The scale() function scales the width and height of the image to a certain proportion of its original size.1)or scale(1,1)has no effect on the element.

skew() function

The skew() function makes the element skew along the X and Y axes by the specified angle. It can be written as skew(ax, ay). If ay is not specified, it is assumed to be zero.

img {
　　　　-webkit-transform: skew(-40deg,　15(deg)];　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: skew(-40deg,　15(deg)];　　/*　Firefox　*/
　　　　　　　　-ms-transform: skew(-40deg,　15(deg)];　　/*　IE　9　*/
　　　　　　　　　　　　transform: skew(-40deg,　15(deg)];　　/*　Modern Browsers　*/　　　　
}

The function skew(-40deg, 15(deg) makes the element skew horizontally along the x-axis-40 degrees, and makes the y-axis vertical skew15degrees.

matrix() function

matrix() function can perform all2D transformation, such as translation, rotation, scaling, and skewing. It takesmatrixThe six parameters in the form can be written as matrix(a, b, c, d, e, f). The next section will show you how to use it to represent each2D transformation function matrix().

• translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty);—where tx and ty are the horizontal and vertical translation values.

• rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0);—where a is the degree. You can swap sin(a) and-The value of sin(a) reverses the rotation. The maximum rotation you can perform is360 degrees.

• scale(sx, sy) = matrix(sx, 0, 0, sy, 0, 0);—where sx and sy are the horizontal and vertical scaling values.

• skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0, 0);—where ax and ay are the horizontal and vertical values in degrees.

This is to execute using the matrix() function2Example of D transformation.

img {
　　　　-webkit-transform: matrix(0,　-1,　1, 0,　200px,　50px);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: matrix(0,　-1,　1, 0,　200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform: matrix(0,　-1,　1, 0,　200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform: matrix(0,　-1,　1, 0,　200px,　50px);　　
}

However, when multiple transformations are performed at once, it is more convenient to use a single transformation function and list them in order, as shown below:

img {
　　　　-webkit-transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　/*　Firefox　*/
　　　　　　　　-ms-transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　/*　IE　9　*/
　　　　　　　　　　　　transform: translate(200px,　50px) rotate(180deg) scale(1.5) skew(0,　30deg);　　　　　　
}

2D Transformation Functions

The following table briefly summarizes all2D Transformation Function