Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is the Transform Property in CSS?
3.
Why Do We Use It?
4.
Example
4.1.
HTML
4.2.
matrix(a, b, c, d, e, f): 2D Transformations
4.2.1.
Example
4.3.
HTML
4.4.
matrix3d(...): 3D Transformations
4.4.1.
Example
4.5.
HTML
4.6.
translate(x, y) and translate3d(x, y, z): Moving Elements
4.6.1.
Code Example for translate()
4.7.
HTML
4.7.1.
Code Example for translate3d()
4.8.
HTML
4.9.
rotate(angle), rotateX(angle), rotateY(angle), and rotateZ(angle): Rotating Elements
4.9.1.
Code Example for rotate()
4.10.
HTML
4.10.1.
Example for rotateX()
4.11.
HTML
4.12.
scale(x, y) and scale3d(x, y, z): Scaling Elements
4.12.1.
Code Example for scale()
4.13.
HTML
4.14.
HTML
4.15.
skew(X-angle, Y-angle): Skewing Elements
4.15.1.
Code Example for skew()
4.16.
HTML
4.17.
perspective(n): Applying Perspective to Elements
4.17.1.
Code Example for perspective()
4.18.
HTML
4.19.
rotate3d(x, y, z, angle): Rotating Elements in 3D Space
4.19.1.
Code Example for rotate3d()
4.20.
HTML
4.21.
scaleX(x) and scaleY(y): Scaling Elements on One Axis
4.21.1.
Code Example for scaleX(x) and scaleY(y)
4.22.
HTML
4.23.
skewX(angle) and skewY(angle): Skewing Elements on One Axis
4.23.1.
Code Example for skewX(angle) and skewY(angle)
4.24.
HTML
5.
Frequently Asked Questions
5.1.
What is the default value for the CSS transform property?
5.2.
Can the transform property be animated?
5.3.
How does the transform-origin property affect transformations?
6.
Conclusion
Last Updated: Mar 27, 2024
Medium

Transform Property in CSS

gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

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. 

Transform Property in CSS

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.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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

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

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 

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

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

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

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

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

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

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

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

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

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

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

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 DSADBMSCompetitive ProgrammingPythonJavaJavaScript, etc. 

Also, check out some of the Guided Paths on topics such as Data Structure and AlgorithmsCompetitive ProgrammingOperating SystemsComputer Networks, DBMSSystem Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.

Previous article
CSS Font Family
Next article
CSS Scrollbar Styling
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass