When using the transform property in CSS, one of the possible methods is the
transform: matrix(1, 0, 0, 1, 0, 0);
-ms-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
The transformation property mentioned above falls in the 2D Transforms category of CSS properties. Along with the
matrix() method mentioned above, there are a few other methods that accompany transform:
To understand the
matrix() method, it is best to understand the other four types first.
These four methods for transformation are exactly as they sound.
Check out translate example here.
translate(e, f) takes in two arguments. The first argument is the x-position of the element, while the second is the y-position - both relative to its initial position. If you wanted to move an element 50px to the right and 100px down, the CSS would look like
transform: translate(50px, 100px);. Positive X is right, positive Y is down; negative numbers move the element in the opposite direction.
Check out rotate example here.
rotate(c) takes in one argument, which is the amount of rotation you'd like the element to have. Positive rotation is clockwise, negative is counterclockwise. Rotating an element 30 degrees clockwise (positive) would look like
transform: rotate(30deg);. Note that this time the argument is in
deg and not
Check out scale example here.
scale(a, d) takes in two arguments. The first argument is the amount to scale in the X-direction, while the second argument is the amount to scale in the Y-direction. Scaling works by multiplying the current value (width, height) by the scale value. Scaling an element by 2 times in the X-direction and 4 times in the Y-direction would look like
transform: scale(2, 4);. The arguments can be any value, including decimals, and even negative. Negative values have the effect of flipping the element about the respective axis.
Check out skew example here.
skew(b, c) is potentially the most confusing transformation to explain.
skew(c, d) takes in two arguments. The first argument corresponds to the horizontal surfaces (top and bottom), while the second argument corresponds to the vertical surfaces (left and right). Both arguments are in
deg, similar to that of
rotate(). Positive values for the first argument will rotate the vertical surfaces counterclockwise about their center points. Negative values will rotate the vertical surfaces clockwise about their center points. Positive values for the second argument rotate the horizontal surfaces clockwise about their center points, while negative values rotate the horizontal surfaces counterclockwise. The limit (in deg) for each argument is +-90deg - as seen in the following example.
Check out matrix example here.
matrix(a, b, c, d, e, f) does everything that the previously listed transformation do.
The two arguments,
d are for scaling the element in the X-direction and the Y-direction, respectively. Identically to that of the
scale(a, d) method.
The second and third arguments
c are for skewing the element. The two values work identically to that of the
skew(b, c) method.
Finally, the last two arguments
f are for translating the element in the X-direction and the Y-direction, respectively. Identically to that of the
translate(e, f) method.
You can use the
matrix() transformation to achieve an incredible amount effects. Take a look at this website, where scrolling down the page (on computers, not mobile devices) causes elements on the page to transform via the
matrix() method. It makes for a great effect!
Finally, there are different syntax for different browsers. According to w3schools here they are the following
transform: -ms-transform: /* IE 9 */ -webkit-transform: /* Safari and Chrome */
The best practice is to test them on various browsers before launching your site.