transform property in css - Naukri Code 360

Introduction

In the digital landscape of web design, the transform property in CSS emerges as a silent yet potent force that redefines the aesthetics of web elements. It's the touch of dynamism that can animate the static, the unseen hand that can reshape, reorient, and redefine.

This property is not just about visual flair; it's a testament to the power of CSS to transform user interfaces into interactive experiences.

What is the Transform Property in CSS?

The transform property in CSS allows you to modify the coordinate space of the rendering engine, enabling the manipulation of an element's shape and position. It can be used to rotate, scale, move (translate), and tilt (skew) elements in a two-dimensional (2D) or three-dimensional (3D) space.

Why Do We Use It?

We use the transform property to enhance the user interface with visual effects that can make a webpage more interactive and engaging. It's also used to create complex animations and as a performant alternative to other positioning methods that can be more taxing on browser rendering.

Syntax, Parameters, and Example

The syntax for the transform property is relatively straightforward:

element {
  transform: <transform-function>(<value>);
}

The <transform-function> can be one of several functions, such as rotate, scale, translate, and skew, each taking specific values.

Values-:

none: No Transformation

Explanation

The none value resets the transform property, meaning no transformations will be applied to the element.

Example

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Transform Property Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: blue;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* No transformation is applied */

    transform: none;

  }

</style>

</head>

<body>




<div class="box">No Transform</div>




</body>

</html>

Output

In this example, the .box class is styled to appear as a blue square with white centered text. The transform: none; rule is applied, meaning that if any transformations were previously set, they would now be removed, and the box would appear in its normal state.

matrix(a, b, c, d, e, f): 2D Transformations

Explanation

The matrix() function combines all 2D transform functions into one. It accepts six parameters that define the matrix to transform the element. These parameters represent the horizontal and vertical scaling, horizontal and vertical skewing, horizontal and vertical translation.

Example

Here's an example of how to use the matrix() function to rotate an element by 30 degrees and scale it by 50%:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Matrix Transform Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: green;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Rotate 30 degrees and scale to 50% */

    transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);

  }

</style>

</head>

<body>

<div class="box">Matrix Transform</div>


</body>

</html>

Output

In this code, the .box will appear as a green square that has been rotated 30 degrees and scaled down to half its size along both the X and Y axes. The matrix values are equivalent to rotate(30deg) and scale(0.5, 0.5).

matrix3d(...): 3D Transformations

Explanation

The matrix3d() function extends the 2D matrix by incorporating three-dimensional transformations. It takes 16 parameters that define the 3D transformation matrix, affecting the X, Y, and Z axes, including 3D rotation, scale, translation, and perspective.

Example

Here's an example of how to use the matrix3d() function to apply a 3D transformation:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Matrix3D Transform Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: red;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* 3D rotate 45 degrees around the X-axis and translate 50px along the Z-axis */

    transform: matrix3d(1, 0, 0, 0, 0, 0.707, 0.707, 0, 0, -0.707, 0.707, 0, 0, 0, 50, 1);

  }

</style>

</head>

<body>

<div class="box">Matrix3D Transform</div>



</body>

</html>

Output

In this example, the .box will appear as a red square that has been rotated 45 degrees around the X-axis and translated 50 pixels along the Z-axis. This creates a perception of depth and rotation in 3D space.

translate(x, y) and translate3d(x, y, z): Moving Elements

Explanation

The translate() function moves an element horizontally and vertically in 2D space, while translate3d() moves an element in 3D space along the X, Y, and Z axes. translateX(), translateY(), and translateZ() are shorthand functions for translating along the individual axes.

Code Example for translate()

Here's how to move an element 50 pixels to the right and 100 pixels down:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Translate Transform Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: purple;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Move right by 50px and down by 100px */

    transform: translate(50px, 100px);

  }

</style>

</head>

<body>

<div class="box">Translate Transform</div>

</body>

</html>

Output

In this example, the .box will be moved 50 pixels to the right and 100 pixels down from its original position.

Code Example for translate3d()

And here's how to move an element in 3D space:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Translate3D Transform Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: orange;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Move right by 50px, down by 100px, and outwards by 150px */

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

  }

</style>

</head>

<body>

<div class="box">Translate3D Transform</div>

</body>

</html>

Output

This code will move the .box 50 pixels to the right, 100 pixels down, and 150 pixels outward from the screen, creating a 3D effect.

rotate(angle), rotateX(angle), rotateY(angle), and rotateZ(angle): Rotating Elements

Explanation

The rotate() function rotates an element around its center point in the 2D plane, while rotateX(), rotateY(), and rotateZ() functions rotate the element around the respective axes in 3D space.

Code Example for rotate()

Here's how to rotate an element by 45 degrees around its center:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Rotate Transform Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: teal;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Rotate element 45 degrees */

    transform: rotate(45deg);

  }

</style>

</head>

<body>

<div class="box">Rotate Transform</div>

</body>

</html>

Output

In this example, the .box will be rotated 45 degrees clockwise around its center.

Example for rotateX()

Now, let's rotate an element around the X-axis in 3D space:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>RotateX Transform Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: pink;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Rotate element 45 degrees around the X-axis */

    transform: rotateX(45deg);

  }

</style>

</head>

<body>

<div class="box">RotateX Transform</div>



</body>

</html>

Output

This code will rotate the .box 45 degrees around the X-axis, giving the impression that it is tilting away from the viewer.

scale(x, y) and scale3d(x, y, z): Scaling Elements

Explanation

The scale() function changes the size of an element in the 2D plane. The scale3d() function scales an element in 3D space. scaleX(), scaleY(), and scaleZ() are the shorthand functions for scaling along each respective axis.

Code Example for scale()

Here's how to double the width and triple the height of an element:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Scale Transform Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: lightseagreen;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Double the width and triple the height */

    transform: scale(2, 3);

  }

</style>

</head>

<body>



<div class="box">Scale Transform</div>

</body>

</html>

Output

In this example, the .box will appear twice as wide and three times as tall as its original size.

Code Example for scale3d()

Now, let's scale an element differently along the X, Y, and Z axes:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Scale3D Transform Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: coral;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Scale by different factors along the X, Y, and Z axes */

    transform: scale3d(1, 2, 3);

  }

</style>

</head>

<body>

<div class="box">Scale3D Transform</div>



</body>

</html>

Output

This code will scale the .box to its original width, twice its height, and three times its depth, creating a stretched effect in 3D space.

skew(X-angle, Y-angle): Skewing Elements

Explanation

The skew() function tilts an element along the X and Y axes in 2D space, which can create a parallelogram effect.

Code Example for skew()

Here's how to skew an element by 30 degrees along the X-axis and 20 degrees along the Y-axis:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Skew Transform Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: darkorchid;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Skew the element by 30 degrees along the X-axis and 20 degrees along the Y-axis */

    transform: skew(30deg, 20deg);

  }

</style>

</head>

<body>

<div class="box">Skew Transform</div>



</body>

</html>

Output

In this example, the .box will be skewed, creating a distorted square shape that resembles a parallelogram.

perspective(n): Applying Perspective to Elements

Explanation

The perspective() function defines how far the object is away from the user, giving a 3D-positioned element some depth. The lower the value, the more intense the 3D effect.

Code Example for perspective()

Here's how to apply a perspective to a container before rotating its child element:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Perspective Transform Example</title>

<style>

  .perspective-container {

    perspective: 500px;

    width: 200px;

    height: 200px;

    margin: 20px;

  }

  .box {

    width: 100%;

    height: 100%;

    background-color: lightblue;

    color: white;

    line-height: 200px;

    text-align: center;

    /* Rotate the box in 3D space */

    transform: rotateX(45deg);

  }

</style>

</head>

<body>

<div class="perspective-container">

  <div class="box">Perspective Transform</div>

</div>

</body>

</html>

Output

In this example, the .perspective-container gives a perspective to the .box, which is rotated in 3D space along the X-axis.

rotate3d(x, y, z, angle): Rotating Elements in 3D Space

Explanation

The rotate3d() function allows you to rotate an element around a fixed axis in 3D space. The first three values are a direction vector (x, y, z) that defines the axis of rotation, and the fourth value is the angle of rotation.

Code Example for rotate3d()

Here's how to rotate an element around a diagonal axis:

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Rotate3D Transform Example</title>

<style>

  .box {

    width: 100px;

    height: 100px;

    background-color: lightcoral;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Rotate the element around a diagonal axis */

    transform: rotate3d(1, 1, 0, 45deg);

  }

</style>

</head>

<body>

<div class="box">Rotate3D Transform</div>



</body>

</html>

Output

In this code, the .box will rotate 45 degrees around an axis that is diagonal to the X and Y axes, creating a twisting effect.

scaleX(x) and scaleY(y): Scaling Elements on One Axis

Explanation

scaleX(x) and scaleY(y) functions scale an element only along the X-axis or Y-axis, respectively.

Code Example for scaleX(x) and scaleY(y)

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>ScaleX and ScaleY Transform Example</title>

<style>

  .box-scaleX {

    width: 100px;

    height: 100px;

    background-color: lightgreen;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Scale the element only along the X-axis */

    transform: scaleX(2);

  }



  .box-scaleY {

    width: 100px;

    height: 100px;

    background-color: lightpink;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Scale the element only along the Y-axis */

    transform: scaleY(2);

  }

</style>

</head>

<body>


<div class="box-scaleX">ScaleX Transform</div>

<div class="box-scaleY">ScaleY Transform</div>

</body>

</html>

Output

In these examples, the first .box-scaleX will be twice as wide due to the scaleX transformation, and the second .box-scaleY will be twice as tall due to the scaleY transformation.

skewX(angle) and skewY(angle): Skewing Elements on One Axis

Explanation

skewX(angle) and skewY(angle) functions skew an element only along the X-axis or Y-axis, respectively.

Code Example for skewX(angle) and skewY(angle)

HTML

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>SkewX and SkewY Transform Example</title>

<style>

  .box-skewX {

    width: 100px;

    height: 100px;

    background-color: lightblue;

    color: white;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Skew the element only along the X-axis */

    transform: skewX(20deg);

  }



  .box-skewY {

    width: 100px;

    height: 100px;

    background-color: lightgoldenrodyellow;

    color: black;

    line-height: 100px;

    text-align: center;

    margin: 20px;

    /* Skew the element only along the Y-axis */

    transform: skewY(20deg);

  }

</style>

</head>

<body>

<div class="box-skewX">SkewX Transform</div>

<div class="box-skewY">SkewY Transform</div>


</body>

</html>

Output

In these examples, the .box-skewX is skewed along the X-axis, and the .box-skewY is skewed along the Y-axis, both creating a slanted effect on the respective axes.

Frequently Asked Questions

What is the default value for the CSS transform property?

The default value for the transform property is none, which means no transformation is applied to the element.

Can the transform property be animated?

Yes, the transform property can be animated using CSS transitions or animations, allowing for smooth transformations on hover, click, or any other interaction.

How does the transform-origin property affect transformations?

The transform-origin property allows you to change the point of origin of the transformation. By default, it is at the center of the element, but it can be set to any value, affecting the behavior of rotation and scaling transformations.

Conclusion

The CSS transform property is a versatile and powerful tool in the web developer's arsenal, enabling rich interactions and animations without heavy reliance on graphics or scripting. Understanding how to leverage its various functions, from translating, scaling, rotating, to skewing, can significantly enhance the user experience of a web page. With the ability to animate these transformations, the possibilities for dynamic, responsive design are virtually limitless.

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc.

Also, check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.