PROJECTS
Vectors and matrices
CSS TRANSFORM
RESOURCESIf you are interested in learning more about the transform
CSS property and especially digging deeper into the out-of-
the-box values, you can refer to the following documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
The site offers an intuitive way to test out your transformation
and also practise different options before you start to use it on
your real site.
If you want to push your matrix and vectors skills to the next
level, we suggest you start looking into glMatrix. This library
performs vector and matrix maths quickly and in a highly
performant way. Unfortunately, JavaScript does not have an
equivalent faster tool by default. You can read more about
this library and start using it in your project by following this
documentation: http://glmatrix.net/docs/Trigonometry fundamentals
If your trigonometry needs a little refresher, there is a lovely simple
tutorial to help you here: https://www.mathsisfun.com/sine-cosine-
tangent.htmlIn CSS, it is possible to use the property transform
to enable any HTML element to be modified in the
two- or three-dimensional space. The property
supports out-of-the-box transformation function
values including translate, scale, rotate and skew.
However, to get the most from transform property
we need to consider the value matrix. By using a
matrix (instead of the pre-defined functions), you
get several benefits:O Represent more complex transformation just
by using one string (instead of a composition of
transform functions)
O Have greater control over the manipulation to a
pixel-perfection level because you are in control of
each pixel on the x, y and z axes
O Get a better understanding of how JavaScript
handles transformation internally as even the pre-
defined functions are then converted into a matrix
(for example, if you check the getComputedStyle() of a
transform property)The CSS syntax of transform using matrix looks
like this, with each # indicating a number:transform: matrix (#, #, #, #, #, #)As already mentioned, transform also supports
multiple transform-functions (eg rotate, scale, skew
etc). Each transform-functions value is multiplied
in order from left to right, meaning that each
transformation is going to be applied to the element
in order from right to left. More information about
available transformation functions can be found in
the boxout.
Going back to the matrix, for two-dimensional
transformation, CSS transform is basically using
a 3x3 matrix (while for the 3D transformation you
fdq#vwduw#iurp#d#7{7#pdwul{,1#Wkh#pdwul{#fdq#eh#
expressed like this:| a c tx |
| b d ty |
| 0 0 1 |In this instance, tx and ty represent horizontal
and vertical translation. If we now express this in
the CSS syntax that we’ve already outlined above, it
looks like this:transform: matrix (a, b, c, d, tx, ty)When transform is applied to an object, each
coordinate of the object in the space is multiplied by
each of the corner-coordinates of the element.To p Rotating DQLPDJH GHJUHHVFORFNZLVH ōUDGLDQV XVLQJDURWDWLRQDOPDWUL[
Above left Transforming the green rectangle using the code ‘transform: matrix (-1,-1,-1,1,1,1)’
results in the overlaid red rectangle
Above right You can ascertain the sine and cosine of the angle of the desired rotation using the
rules of trigonometry: ‘sin Ơ = opposite ÷ hypotenuse ‘ and ‘cos Ơ = adjacent ÷ hypotenuse’