Home >>CSS Tutorial >CSS 3D Transform

CSS 3D Transform

CSS 3D Transform element

The CSS 3D Transform elements facilitates you to change elements using 3D transformation. It allows you to rotate an element along X-axis, Y-axis and z-axis.

These are the three main types of transformation:

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

Methods of 3D transformation:

function Description
matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) It defines to set a 3D transformation, using a 4x4 matrix of 16 values.
translate3D(x,y,z) It defines to set a 3D translation.
scaleX(x) It defines to specify a 3D scale transformation by giving value for the X-axis.
scaleY(y) It defines to set a 3D scale transformation by giving a value for the Y-axis.
scaleZ(z) It defines to set a 3D scale transformation by giving a value for the Z-axis.
translateX(x) It defines to set a 3D translation, by using the value for X-axis.
translateY(y) It defines to set a 3D translation, using only the value for the Y-axis.
translateZ(z) It defines to set a 3D translation, using only the value for the Z-axis.
rotateX(angle) It defines to set a 3D rotation along with X-axis.
rotateY(angle) It defines to set a 3D rotation along with Y-axis.
rotateZ(angle) It defines to set a 3D rotation along with Z-axis.
scale3D(x,y,z) It defines to set a 3D scale transformation.
rotate3D(X,Y,Z,angle) It defines to set a 3D rotation along with X-axis, Y-axis and Z-axis.
perspective(n) It defines to set a perspective view for a 3D transformed element.

CSS Transform Properties

These are the following 3D transform properties:

Property Description
transform It is used to applies a 2D or 3D transformation to an element
transform-origint This property allows you to change the transformed elements position.
transform-style It is used to Specifies how nested elements are rendered in 3D space
perspective It is used to Specifies the perspective on how 3D elements are viewed
perspective-origin It is used to Specifies the bottom position of 3D elements
backface-visibility It Defines whether or not an element should be visible when not facing the screen

The rotateX() Method

The rotationX() method is used to rotate an element around X-axis at a given degree.

Let's take an example of rotateX():

<!DOCTYPE html> 
<html> 
<head> 
<title>3D Transformation</title> 
<style> 
.normal_div { 
width: 300px; 
height: 150px; 
color: white; 
font-size:25px; 
background-color: orange; 
border: 1px solid black; 
margin-bottom:20px; 
} 
#rotateX { 
width: 300px; 
height: 150px; 
color: white; 
font-size:25px; 
background-color: orange; 
border: 1px solid black; 
-webkit-transform: rotateX(150deg); /* Safari */ 
transform: rotateX(150deg); /* Standard syntax */ 
} 
.rotate { 
font-size:40px; 
font-weight:bold; 
color:orange; 
} 
.rotate1 { 
font-size:25px; 
font-weight:bold; 
margin:20px 0; 
} 
</style> 
</head> 
<body> 
<center> 
<div class = "rotate">Phptpoint</div> 
<div class = "rotate1">3D rotateX() Method</div> 
<div class = "normal_div"> This is a normal div.. </div> 
<div id="rotateX">150 degree rotated contents...</div> 
</center> 
</body> 
</html>
Output:
Phptpoint
3D rotateX() Method
This is a normal div..
150 degree rotated contents...

The rotateY() Method

The rotationY() method is used to rotate an element around Y-axis at a given degree.

Let's take an example of rotateY():

<!DOCTYPE html> 
<html> 
	<head> 
		<title>3D Transformation</title> 
		<style> 
			.normal-div { 
				width: 200px; 
				color:white; 
				font-size:25px; 
				height: 100px; 
				background-color: orange; 
				border: 1px solid black; 
				margin-bottom:20px; 
			} 
			
			#rotateY { 
				width: 200px; 
				color:white; 
				font-size:25px; 
				height: 100px; 
				background-color: orange; 
				border: 1px solid black; 
				-webkit-transform: rotateY(150deg); /* Safari */ 
				transform: rotateY(150deg); /* Standard syntax */ 
			} 
			.rotateY { 
				font-size:40px; 
				font-weight:bold; 
				color:orange; 
			} 
			.rotateY1 { 
				font-size:25px; 
				font-weight:bold;			
				margin:20px 0; 
			} 
		</style> 
	</head> 
	<body> 
		<center> 
			<div class = "rotateY">Phptpoint</div> 
			<div class = "rotateY1">3D rotateY() Method</div> 
			<div class = "normal-div"> This is a normal Div.. </div> 
			<div id="rotateY">150 degree rotated contents...</div> 
		</center> 
	</body> 
</html>		
Output:
Phptpoint
3D rotateY() Method
This is a normal Div..
150 degree rotated contents...

The rotateZ() Method

The rotationZ() method is used to rotate an element around Z-axis at a given degree.

Let's take an example of rotateZ():

<!DOCTYPE html> 
<html> 
	<head> 
		<title>3D Transformation</title> 
		<style> 
			.normal_div1 { 
				width: 200px; 
				height: 100px; 
				font-size:25px; 
				color:white; 
				background-color: orange; 
				border: 1px solid black; 
			} 
			#rotateZ { 
				width: 200px; 
				height: 100px; 
				color:white; 
				font-size:25px; 
				background-color: orange; 
				border: 1px solid black; 
				-webkit-transform: rotateZ(90deg); /* Safari */ 
				transform: rotateZ(90deg); /* Standard syntax */ 
			} 
			.rotateZ { 
				font-size:40px; 
				font-weight:bold; 
				color:orange; 
			} 
			.rotateZ1 { 
				font-size:25px; 
				font-weight:bold; 
				margin:20px 0; 
			} 
		</style> 
	</head> 
	<body> 
		<center> 
			<div class = "rotateZ">Phptpoint</div> 
			<div class = "rotateZ1">3D rotateZ() Method</div> 
			<div class = "normal_div1"> This is a normal div.. </div> 
			<div id="rotateZ">90 degree rotated contents...</div> 
		</center> 
	</body> 
</html>		
Output:
Phptpoint
3D rotateZ() Method
This is a normal div..
90 degree rotated contents...