When using the transform property in CSS, one of the possible methods is the matrix
method that requires 6 input fields. The CSS code would look something like...
#test{
transform: matrix(1, 0, 0, 1, 0, 0);
}
There are also a couple other variations (depending on the browser)...
-ms-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
I know that the values shown above are the stock values for an object, but what do all the numbers mean or do?
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:translate()
,rotate()
,scale()
andskew()
To understand the
matrix()
method, it is best to understand the other four types first.TRANSFORMS:
These four methods for transformation are exactly as they sound.
TRANSLATE:
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 liketransform: translate(50px, 100px);
. Positive X is right, positive Y is down; negative numbers move the element in the opposite direction.ROTATE:
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 liketransform: rotate(30deg);
. Note that this time the argument is indeg
and notpx
.SCALE:
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 liketransform: 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.SKEW:
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 indeg
, similar to that ofrotate()
. 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.MATRIX:
Check out matrix example here.
matrix(a, b, c, d, e, f)
does everything that the previously listed transformation do.The two arguments,
a
andd
are for scaling the element in the X-direction and the Y-direction, respectively. Identically to that of thescale(a, d)
method.The second and third arguments
b
andc
are for skewing the element. The two values work identically to that of theskew(b, c)
method.Finally, the last two arguments
e
andf
are for translating the element in the X-direction and the Y-direction, respectively. Identically to that of thetranslate(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 thematrix()
method. It makes for a great effect!Finally, there are different syntax for different browsers. According to w3schools here they are the following
The best practice is to test them on various browsers before launching your site.
For further information about various 2D Transformations, check out this link. For the mathematics behind the
matrix()
method, check out this link.Instead of spending time trying to wrap your head around matrices when you don't have a mathematical background I recommend understanding the other transforms and knowing how to combine them in one line since if you try breaking them apart only the last directive is executed.
Instead of this
Do this instead:
And that gives you your desired result which you can wrap your head around and has as much power as the matrix.