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 that we will learn about:

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

CSS3 rotateX() Method

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

<!DOCTYPE html>
<html>
<head>
<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">
The rotateX() method rotates an element around its X-axis
at a given degree. This div element is rotated at 150 degrees
</div>

</body>
</html>

Here is the sample output produced by the above CSS3 example:

css3 3d transforms

CSS3 rotateY() Method

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

<!DOCTYPE html>
<html>
<head>
<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">
The rotateY() method rotates an element around 
its Y-axis at a given degree. 
This div element is rotated at 150 degrees
</div>

</body>
</html>

Following is the sample output produced by the above CSS3 example:

css 3d transforms

CSS3 rotateZ() Method

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

<!DOCTYPE html>
<html>
<head>
<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">
The rotateZ() method rotates an element around its Z-axis at a given degree. 
This div element is rotated at 90 degrees
</div>

</body>
</html>

The above CSS3 example will produce the following output:

css3 3d transformation example

« Previous Tutorial CodesCracker Home »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test