CSS transform Property

February 10, 2021 12:37 pm IST

You are Here:

CSS transform Property

CSS transform property applies a 2D or 3D transformation to an element. This property lets you to rotate, scale, skew, or translate an element.

CSS translateX() Function

CSS translateX() function repositions an element horizontally on the 2D plane.

Note: The translateX() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid black; transform: translateX(80px); } </style> </head> <body> <h1>CSS transform Property</h1> <div> 80px from left </div> </body> </html>

Run

Syntax

Using CSS

element{ transform: rotate(50deg); }

Using Javascript

object.style.transform="rotate(50deg)";

Animatable

Yes, transform property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS transform property is none.

Property Value

The following table provides a list of values for CSS transform property.

Value	Explanation
none	Specifies that there should be no transformation.
translateX(x)	Specifies a translation, using only the value for the X-axis.
translateY(y)	Specifies a translation, using only the value for the Y-axis.
translateZ(z)	Specifies a 3D translation, using only the value for the Z-axis.
translate(x,y)	Specifies a 2D translation.
translate3d(x,y,z)	Specifies a 3D translation.
matrix(n,n,n,n,n,n)	Specifies a 2D transformation, using a matrix of six values.
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Specifies a 3D transformation, using a 4x4 matrix of 16 values.
scaleX(x)	Specifies a scale transformation by giving a value for the X-axis.
scaleY(y)	Specifies a scale transformation by giving a value for the Y-axis.
scaleZ(z)	Specifies a 3D scale transformation by giving a value for the Z-axis.
scale(x,y)	Specifies a 2D scale transformation.
scale3d(x,y,z)	Specifies a 3D scale transformation.
rotateX(angle)	Specifies a 3D rotation along the X-axis.
rotateY(angle)	Specifies a 3D rotation along the Y-axis.
rotateZ(angle)	Specifies a 3D rotation along the Z-axis.
rotate(angle)	Specifies a 2D rotation, the angle is specified in the parameter.
rotate3d(x,y,z,angle)	Specifies a 3D rotation.
skewX(angle)	Specifies a 2D skew transformation along the X-axis.
skewY(angle)	Specifies a 2D skew transformation along the Y-axis.
skew(x-angle,y-angle)	Specifies a 2D skew transformation along the X- and the Y-axis.
perspective(n)	Specifies a perspective view for a 3D transformed element.

CSS translateY() Function

CSS translateY() function repositions an element vertically on the 2D plane.

Note: The translateY() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid black; transform: translateY(80px); } </style> </head> <body> <h1>CSS transform Property</h1> <div> 80px from top </div> </body> </html>

Run

CSS translateZ() function

CSS translateZ() function repositions an element along the z-axis in 3D space.

Note: The translateZ() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid black; transform: perspective(1000px) translateZ(60px); } </style> </head> <body> <h1>CSS transform Property</h1> <div> div </div> </body> </html>

Run

CSS translate() Function

CSS translate() function repositions an element in the horizontal and/or vertical directions.

Note: The translate() function is specified with two values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid black; transform: translate(80px, 40px); } </style> </head> <body> <h1>CSS transform Property</h1> <div> 80px from left and 10px from top </div> </body> </html>

Run

CSS translate3d() Function

CSS translate3d() function repositions an element in 3D space.

Note: The translate3d() function is specified with six values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; border: 1px solid black; transform: perspective(500px) translate3d(50px, 50px, 50px); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

matrix()

CSS matrix() function defines a homogeneous 2D transformation matrix.

Note: The matrix() function is specified with six values.

Note: matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: matrix(1, 0, 1, 1, 2, 3); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

matrix3d()

CSS matrix3d() function specifies a 3D transformation as a 4x4 homogeneous matrix.

Note: The matrix3d() function is specified with 16 values. They are described in the column-major order.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: matrix3d( 1,1,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1.5 ); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

scaleX()

CSS scaleX() function specifies a transformation that resizes an element along the x-axis (horizontally).

Note: The scaleX() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: scaleX(2); } </style> </head> <body> <h1>CSS transform Property</h1> <div> x-axis is expanded 2 times of given 'width'. </div> </body> </html>

Run

scaleY()

CSS scaleY() function specifies a transformation that resizes an element along the y-axis (vertically).

Note: The scaleY() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-top: 50px; border: 1px solid black; transform: scaleY(2); } </style> </head> <body> <h1>CSS transform Property</h1> <div> y-axis is expanded 2 times of given 'height'. </div> </body> </html>

Run

scaleZ()

CSS scaleZ() function specifies a transformation that resizes an element along the z-axis.

Note: The scaleZ() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: perspective(400px) scaleZ(2) translateZ(-100px); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

scale()

CSS scale() function specifies a transformation that resizes an element on the 2D plane.

Note: The scale() function is specified with two values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin: 50px; border: 1px solid black; transform: scale(1.3, 1.5); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

scale3d()

CSS scale3d() function specifies a transformation that resizes an element in 3D space.

Note: The scale3d() function is specified with three values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

rotateX()

CSS rotateX() function specifies a transformation that rotates an element around the abscissa (horizontal axis) without deforming it.

Note: The rotateX() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: rotateX(180deg); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

rotateY()

CSS rotateY() function specifies a transformation that rotates an element around the ordinate (vertical axis) without deforming it.

Note: The rotateY() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: rotateY(180deg); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

rotateZ()

CSS rotateZ() function specifies a transformation that rotates an element around the z-axis without deforming it.

Note: The rotateZ() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: rotateZ(45deg); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

rotate()

CSS rotate() function specifies a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.

Note: The rotate() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: rotate(20deg); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

rotate3d()

CSS rotate3d() function specifies a transformation that rotates an element around a fixed axis in 3D space, without deforming it.

Note: The rotate3d() function is specified with four values (at maximum).

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ perspective: 800px; } div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: rotate3d(0, 1, 0, 60deg); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

skewX()

CSS skewX() function specifies a transformation that skews an element in the horizontal direction on the 2D plane.

Note: The skewX() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: skewX(20deg); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

skewY()

CSS skewY() function specifies a transformation that skews an element in the vertical direction on the 2D plane.

Note: The skewY() function is specified with one values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: skewY(20deg); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

skew()

CSS skew() function specifies a transformation that skews an element on the 2D plane.

Note: The skew() function is specified with one or two values.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; transform: skew(20deg,20deg); } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> </body> </html>

Run

perspective()

CSS perspective() function specifies a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimenstional.

Note: The perspective() function is specified with one values.

Example

HTML Online Editor

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS transform property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ width: 100px; height: 100px; margin-left: 50px; border: 1px solid black; } </style> </head> <body> <h1>CSS transform Property</h1> <div> Div </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.transform = "rotate(50deg)"; } </script> </body> </html>

Run