CSS3 animation technology you need to know (2)

Author：Eve Cole Update Time：2025-01-15 16:16:56

translate

The name "translate" is a bit misleading. It is actually a method of positioning elements using X and Y coordinate values.

The following is the quoted content:

#nav{
/* This will move the nav element 10 pixels to the left and 20 pixels down */
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);
}

Browser support

The translate attribute is currently only supported by Firefox, Safari and Chrome, and must use the browser's private prefixes -moz- and -webkit-.

Skew

Skew is also a useful transform function, which can tilt an object at a certain angle around the x and y axes. This is different from the rotation of rotate, which only rotates without changing the shape of the element. Skew changes the shape of an element. Skew has two parameters, representing the tilt of the x and y axes respectively.

The following is the quoted content:

#nav{
/* This will move the nav element 10 pixels to the left and 20 pixels down */
-moz-transform: skew(30deg, -10deg);
-webkit-transform: skew(30deg, -10deg);
}

Browser support

The Skew attribute is currently only supported by Firefox, Safari and Chrome, and uses the browser's private prefixes -moz- and -webkit-.

Matrix

Yes, Matrix is a matrix. Matrix is a very basic thing in advanced mathematics, and it is indeed a very advanced function in CSS 3. CSS 3 introduces the matrix function, which can realize the above various effects very flexibly. It has 6 parameters (a, b, c, d, e, f), which is actually a 3*3 matrix through which the old parameters are converted into new values:

| abe |

| cdf |

| 0 0 1 |

If you are interested in studying in depth, you can take a look here http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined . This is a document for SVG, but the principle of matrix transformation is universal.

Let's look at an example:

The following is the quoted content:

#nav{
/* The nav element will be tilted like the upper right corner */
-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
}

Browser support

The good news is that IE supports matrix filters. Although it does not support most CSS3 transformation functions, you can basically achieve the same effect using this filter. However, you must first understand matrix operations. Both webkit and Firefox (3.5+) support this feature.

chain deformation

Transforms are often standalone, but if you want to use multiple transformations at the same time, the code can be quickly integrated, especially using private extensions. Luckily, we have some built-in abbreviations:

The following is the quoted content:

#nav{
-moz-transform: translate(10, 25);
-webkit-transform: translate(10, 25);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: scale(2, 1);
-webkit-transform: scale(2, 1);
}

These transformations can be chained together to make your code more efficient:

The following is the quoted content:

nav{
-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
}

The real power of these properties is combined together. You can move, rotate, scale and control any inline and block-level elements without using JavaScript. Once support for these properties becomes more widespread, we can create richer and lighter interfaces and applications.

transform-origin

transform-origin is not a sub-function of transform, but it is very closely related to transform. It can be used to specify the starting point of the transform. For example, the default starting point of the rotate transformation is the middle. You can set the starting point in the upper left corner or the lower left corner, so that the results of the rotate transformation may be very different.

transform-origin accepts two parameters, which can be specific values such as percentage, em, px, etc., or descriptive parameters such as left, center, right, or top, middle, bottom, etc. A few examples:

The following is the quoted content:

.class1{-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
...}
.class3{-moz-transform-origin:top left;
-webkit-transform-origin:top left;
...}

Browser compatibility

This attribute is currently only supported by webkit and firefox, and requires adding their own private prefix.