codescracker


css

CSS3 3D Transforms



« Previous Tutorial CodesCracker Home »


CSS3 3D Transformation Demo

Hover Me
Hover Me
Hover Me
Hover Me
Hover Me
Hover Me

You are free to create 3D transformation using CSS3.

There are the following 3D transformation methods available in CSS3, used to create 3D transformation effect:

Let's explain all these methods used in CSS3 to create 3D transformation effect, one by one.

CSS3 3D Transform using rotateX() Method

The CSS3 rotateX() method rotates an element around its X-axis at a given degree.

Here is an example uses CSS3 rotateX() method to create 3D transformation effect:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 3D Transformation Example</title>
	<style>
		div { width:300px; height:100px; background-color:red;
			color:white; border:2px solid green; }
		div#mDiv { -webkit-transform:rotateX(150deg); /* Safari */
			transform:rotateX(150deg); /* Standard syntax */ }
	</style>
</head>
<body>

<div>
	This a normal div element.
</div>
<div id="mDiv">
	This div element is rotated at 150 degrees.
</div>

</body>
</html>

Here is the sample output produced by the above CSS3 3D transformation using rotateX() method example code:

css3 3d transforms

CSS3 3D Transform using rotateY() Method

The CSS3 rotateY() method rotates an element around its Y-axis at a given degree.

The following example uses the CSS3 rotateY() method to create 3D transformation effect:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 3D Transformation Example</title>
	<style>
		div { width:300px; height:100px; background-color:red;
			color:white; border:2px solid green; }
		div#mDiv { -webkit-transform:rotateY(150deg);
			transform:rotateY(150deg); }
	</style>
</head>
<body>

<div>
	This a normal div element.
</div>
<div id="mDiv">
	This div element is rotated at 150 degrees.
</div>

</body>
</html>

Following is the sample output produced by the above CSS3 3D transformation effect using rotateY() method example:

css 3d transforms

CSS3 3D Transform using rotateZ() Method

The CSS3 rotateZ() method rotates an element around its Z-axis at a given degree.

The example given below uses the CSS3 rotateZ() method to create 3D transformation effect:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 3D Transformation Example</title>
	<style>
		div { width:300px; height:100px; background-color:red;
			color:white; border:2px solid green; }
		div#mDiv { -webkit-transform:rotateZ(90deg);
			transform:rotateZ(90deg); }
	</style>
</head>
<body>

<div>
	This a normal div element.
</div>
<div id="mDiv">
	This div element is rotated at 90 degrees.
</div>

</body>
</html>

The above CSS3 3D transformation using rotateZ() method example will produce the following output:

css3 3d transformation example

« Previous Tutorial CodesCracker Home »




Tools
Calculator

Quick Links
Signup - Login - Give Online Test