JavaScript Tutorial

CSS 3D Transformation

CSS 3D Transformation enables us to move elements in a three-dimensional space by manipulating their position along the X-axis, Y-axis, and Z-axis.

This type of transformation allows for more realistic and immersive visual effects compared to 2D transformations. Elements can be translated, rotated, scaled, and skewed in three dimensions, creating depth and perspective in the design.

By utilizing CSS 3D Transformation, web designers can achieve various 3D effects, such as rotating objects in 3D space, creating 3D carousels, or simulating 3D environments. This adds a new dimension to web design and enhances the overall user experience.

Transformation Method

Following are the different transformation methods supported by CSS:-

Format

Description

translate(x,y)

used to transform the element along X-axis and Y-axis

matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

It specifies a 3D transformation, using a 4x4 matrix of 16 values.

translate3D(x,y,z)

It specifies a 3D translation.

translateX(x)

It specifies 3D translation, using only the value for the X-axis.

translateY(y)

It specifies 3D translation, using only the value for the Y-axis.

translateZ(z)

It specifies 3D translation, using only the value for the Z-axis.

scale3D(x,y,z)

It specifies 3D scale transformation

scaleX(x)

It specifies 3D scale transformation by giving a value for the X-axis.

scaley(y)

It specifies 3D scale transformation by giving a value for the Y-axis.

scaleZ(z)

It specifies 3D scale transformation by giving a value for the Z-axis.

rotateX() method

This method is used to rotate an element around its X-axis according to the given degree.

Input:-

 

Output:-

 

rotateY() method

This method is used to rotate an element around its Y-axis according to the given degree.

Input:-

 

Output:-

 

rotateZ() method

This method is used to rotate an element around its Z-axis according to the given degree.

Input:-

 

Output:-

 

Go back to Previous Course