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...

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads