CSS Transforms

CSS/CSS Transforms

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 around

rotate() to rotate elements

scale() to scale elements in size

skew() to twist or slant an element

matrix() 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 axis

translateY() to move elements around on the Y axis

scaleX() to scale elements in size on the X axis

scaleY() to scale elements in size on the Y axis

skewX() to twist or slant an element on the X axis

skewY() to twist or slant an element on the Y axis

Here is an example of a transformation that 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-original: lets us set the origin (the (0, 0) coordinates) for the transformation, letting us change the rotation center.

Reading from right to left, translate (100%, -50%) is the translation to bring the transform-origin to the true origin, rotate(45deg) is the original transformation, and translate (-100%, 50%) is the translation to restore the transform-origin to its original location.

 transform-origin: 0 0;

transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

Combining multiple transforms

You can combine multiple transforms by separating each function with a space.

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 of in a 2D space. With 3D, we are adding another axis, Z, which adds depth to our 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, and how are we looking at it on the X and Y axis.

Now we can use additional functions that control the Z axis, which adds up to the other X and Y axis transforms:

translateZ()

rotateZ()

scaleZ()

and the corresponding shorthand’s translate3d(), rotate3d() and scale3d() as shorthand’s for using the translateX(), translateY() and translateZ() functions and so on.

3D transforms are a bit too advanced for this handbook, but a great topic to explore on your own.