CSS transform Property - 2D and 3D

Introduction

The transform property is used to transform an element in 2D or 3D space. It allows you to rotate, scale, skew, or translate an element. This property accepts a CSS function or a list of functions.

This property visually transforms an element without changing its layout. It can be used to create animations, icons, and other visual effects.

Syntax

The syntax of the transform property is given below:

div {
    transform: none | transform-functions;
}

The transform property accepts the following values:

• none - This value specifies that no transformation should be applied.
• transform-functions - This value specifies a list of one or more transformation functions.

CSS transform Functions

You can see in the above syntax that the transform property accepts a list of one or more transformation functions. Let's see the list of transformation functions with their use with examples.

2D transform Functions

1. translate() - This function is used to translate an element along the X and Y axis.

   • translateX()
   • translateY()
   • translateZ()

2. scale() - This function is used to scale an element along the X and Y axis.

   • scaleX()
   • scaleY()
   • scaleZ()

3. rotate() - This function is used to rotate an element along the X and Y axis.

   • rotateX()
   • rotateY()
   • rotateZ()

4. skew() - This function is used to skew an element along the X and Y axis.

   • skewX()
   • skewY()

5. matrix() - This function is used to apply a 2D transformation to an element.

3D transform Functions

1. translate3d() - This function is used to translate an element along the X, Y, and Z axis.

2. scale3d() - This function is used to scale an element along the X, Y, and Z axis.

3. rotate3d() - This function is used to rotate an element along the X, Y, and Z axis.

4. matrix3d() - This function is used to apply a 3D transformation to an element.

5. perspective() - This function is used to define the perspective for a 3D transformed element.

2D transform Functions

1. translate() Function

The translate() function is used to move an element up, down, left, or right.

It accepts two parameters, the first parameter x is used to move the element along the X axis, and the second parameter y is used to move the element along the Y axis.

For example translate(50px, 20px) will move the element 50px along the X axis and 20px along the Y axis.

div {
    /* Move the element 50px along the X-axis
    and 20px along the Y-axis */
    transform: translate(50px, 20px);
}

Visualize the output:

1.1 translateX() Function

The translateX() function is used to move an element along the X-axis.

It accepts only one parameter (x). For example translateX(50px) will move the element 50px along the X axis.

div {
    /* Move the element 50px along the X-axis */
    transform: translateX(50px);
}

Visualize the output:

1.2 translateY() Function

The translateY() function is used to move an element along the Y axis.

It accepts only one parameter (Y). For example translateY(20px) will move the element 20px along the Y axis.

div {
    /* Move the element 20px along the Y-axis */
    transform: translateY(20px);
}

Visualize the output:

2. scale() Function

The scale() function is used to change the size of an element.

It accepts 2 parameter values x and y. The first parameter changes the width of the element, and the second parameter changes the height of the element.

For example scale(1.5, 0.5) will increase the width of the element by 50% and decrease the height of the element by 50%.

div {
    /* Increase the width of the element by 50%
    and decrease the height of the element by 50% */
    transform: scale(1.5, 0.5);
}

Visualize the output:

2.1 scaleX() Function

The scaleX() function just changes the width of the element.

div {
    /* Increase the width of the element by 50% */
    transform: scaleX(1.5);
}

Visualize the output:

2.2 scaleY() Function

The scaleY() function just changes the height of the element.

div {
    /* Increase the height of the element by 50% */
    transform: scaleY(1.5);
}

Visualize the output:

3. rotate() Function

The rotate() function is rotates an element clockwise or counter-clockwise around its center.

It accepts 1 parameter value angle. The parameter value is the angle by which the element is rotated.

For example rotate(45deg) will rotate the element by 45 degrees.

div {
    /* Rotate the element by 45 degrees */
    transform: rotate(45deg);
}

Visualize the output:

3.1 rotateX() Function

The rotateX() function rotates an element clockwise or counter-clockwise around its X-axis.

div {
    /* Rotate the element by 45 degrees around its X-axis */
    transform: rotateX(45deg);
}

Visualize the output:

3.2 rotateY() Function

The rotateY() function rotates an element clockwise or counter-clockwise around its Y-axis.

div {
    /* Rotate the element by 45 degrees around its Y-axis */
    transform: rotateY(45deg);
}

Visualize the output:

3.3 rotateZ() Function

The rotateZ() function rotates an element clockwise or counter-clockwise around its Z-axis.

div {
    /* Rotate the element by 45 degrees around its Z-axis */
    transform: rotateZ(45deg);
}

Visualize the output:

4. skew() Function

The skew() function skews an element along the X and Y axes.

For example skew(45deg, 45deg) will skew the element by 45 degrees along the X and Y axes.

div {
    /* Skew the element by 45 degrees along the X and Y axes */
    transform: skew(45deg, 45deg);
}

Visualize the output:

4.1 skewX() Function

The skewX() function skews an element along the X-axis.

div {
    /* Skew the element by 45 degrees along the X-axis */
    transform: skewX(45deg);
}

Visualize the output:

4.2 skewY() Function

The skewY() function skews an element along the Y-axis.

div {
    /* Skew the element by 45 degrees along the Y-axis */
    transform: skewY(45deg);
}

Visualize the output:

5. matrix() Function

The matrix() function defines a 2D transformation using a matrix of six values.

The values represented as matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

For example matrix(1.5, 1, 0.5, 0.5, 50, 50) will scale the element by 1.5 along the X-axis, 0.5 along the Y-axis, skew the element by 1 along the X-axis and 0.5 along the Y-axis, and translate the element by 50px along the X-axis and 50px along the Y-axis.

div {
    transform: matrix(1.5, 1, 0.5, 0.5, 50, 50);
}

Visualize the output:

3D transform Function

3D transform functions are used to transform elements into three-dimensional space.

1. translate3d() Function

The translate3d() function translates an element along the X, Y, and Z axes.

Before using the translate3d() function, you must set the transform-style property to preserve-3d for the element to be transformed into three-dimensional space.

Also, the parent element must have a perspective property set to a value other than none to create a three-dimensional space.

.parent {
    /* Set the perspective property to
    create a three-dimensional space */
    perspective: 500px;
}

div.child {
    /* Set the transform-style property to
    preserve-3d to transform the element
    in three-dimensional space */
    transform-style: preserve-3d;

    transform: translate3d(50px, 50px, 150px);
}

Visualize the output:

2. rotate3d() Function

The rotate3d() function rotates an element along the X, Y, and Z axes.

The function takes four values represented as rotate3d(x, y, z, angle). Where x, y and z are describes the coordinate of the vector denoting the axis of rotation which could be between 0 and 1.

div {
    transform: rotate3d(1, 1, 1, 60deg);
}

Visualize the output:

Multiple Transform Functions

You can use multiple transform functions in a single transform property.

The order of the functions is important. The last function will be applied first.

div {
    transform: scale(1.5, 0.5) rotate(60deg);
}

Visualize the output:

Conclusion

In this tutorial, you have learned about the CSS transform property and its various functions.

You can use the transform property to translate, rotate, scale, and skew elements.

You can also use the transform property to create three-dimensional effects.

Next, you will learn about the CSS transition property.