CSS Transforms
How to work with the CSS `transform` property
Transforms allow you to translate, rotate, scale, and skew elements, in the 2D or 3D space. They are a very cool CSS feature, especially when combined with animations.
2D transforms
The transform
property accepts those functions:
translate()
to move elements aroundrotate()
to rotate elementsscale()
to scale elements in sizeskew()
to twist or slant an elementmatrix()
a way to perform any of the above operations using a matrix of 6 elements, a less user friendly syntax but less verbose
We also have axis-specific functions:
translateX()
to move elements around on the X axistranslateY()
to move elements around on the Y axisscaleX()
to scale elements in size on the X axisscaleY()
to scale elements in size on the Y axisskewX()
to twist or slant an element on the X axisskewY()
to twist or slant an element on the Y axis
Here is an example of a transform which changes the .box
element width by 2 (duplicating it) and the height by 0.5 (reducing it to half):
.box {
transform: scale(2, 0.5);
}
transform-origin
lets us set the origin (the (0, 0)
coordinates) for the transformation, letting us change the rotation center.
Combining multiple transforms
You can combine multiple transforms by separating each function with a space.
For example:
transform: rotateY(20deg) scaleX(3) translateY(100px);
3D transforms
We can go one step further and move our elements in a 3D space instead than on a 2D space. With 3D, we are adding another axis, Z, which adds depth to out visuals.
Using the perspective
property you can specify how far the 3D object is from the viewer.
Example:
.3Delement {
perspective: 100px;
}
perspective-origin
determines the appearance of the position of the viewer, how are we looking at it in the X and Y axis.
Now we can use additional functions that control the Z axis, that adds up to the other X and Y axis transforms:
translateZ()
rotateZ()
scaleZ()
and the corresponding shorthands translate3d()
, rotate3d()
and scale3d()
as shorthands for using the translateX()
, translateY()
and translateZ()
functions and so on.
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X