CSS3 3D Transforms, TutorialsPoint, CSS3 3D Transforms Tutorial

CSS3 3D Transforms

CSS3 3D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a three-dimensional space.

The CSS3 transform property uses the transform functions to manipulate the coordinate system used by an element in order to apply the transformation effect.

The following 3D transformation methods:

1. rotateX()

2. rotateY()

3. rotateZ()

Function	Description
translate3d(x,y,z)	3D translation
translateX(x)	3D translation, using only the value for the X-axis
translateY(y)	3D translation, using only the value for the Y-axis
translateZ(z)	3D translation, using only the value for the Z-axis
scale3d(x,y,z)	3D scale transformation
scaleX(x)	3D scale transformation by giving a value for the X-axis
scaleY(y)	3D scale transformation by giving a value for the Y-axis
scaleZ(z)	3D scale transformation by giving a value for the Z-axis
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3D transformation, using a 4x4 matrix of 16 values
rotate3d(x,y,z,angle)	3D rotation
rotateX(angle)	3D rotation along the X-axis
rotateY(angle)	3D rotation along the Y-axis
rotateZ(angle)	3D rotation along the Z-axis
perspective(n)	Perspective view for a 3D transformed element

RotateX(angle) Example :

<!DOCTYPE html>
<html>
<head>
<title>CSS3 3D Transform RotateX</title>

<style type="text/css">
.rotate_x{
    width: 300px;
    height: 100px;
    background-color: #F60;
    border: 1px solid #0099da;
}
.rotate_x_angle{
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg); /* Standard syntax */
    width: 300px;
    height: 100px;
    background-color: #F60;
    border: 1px solid #0099da;
}
</style>

</head>
<body>
 
<div class="rotate_x">
www.freetimelearning.com
</div>
 
<div class="rotate_x_angle">
The rotateX() method rotates an element around its X-axis at a given degree. 
This div element is rotated 150 degrees.
</div>
 
</body>
</html>

Output :

www.freetimelearning.com

The rotateX() method rotates an element around its X-axis at a given degree. This div element is rotated 150 degrees.

RotateY(angle) Example :

<!DOCTYPE html>
<html>
<head>
<title>CSS3 3D Transform RotateY</title>
<style type="text/css">
.rotate_y{
    width: 300px;
    height: 100px;
    background-color: #F60;
    border: 1px solid #0099da;
}
.rotate_y_angle{
    -webkit-transform: rotateY(150deg); /* Safari */
    transform: rotateY(150deg); /* Standard syntax */
    width: 300px;
    height: 100px;
    background-color: #F60;
    border: 1px solid #0099da;
}
</style>
</head>
<body>
 
<div class="rotate_y">
   www.freetimelearning.com
</div>
 
<div class="rotate_y_angle">
  The rotateY() method rotates an element around its Y-axis at a given degree. 
This div element is rotated 150 degrees.
</div>
 
</body>
</html>

Output :

www.freetimelearning.com

The rotateY() method rotates an element around its Y-axis at a given degree. This div element is rotated 150 degrees.

RotateZ(angle) Example :

<!DOCTYPE html>
<html>
<head>
<title>CSS3 3D Transform RotateZ</title>
<style type="text/css">
.rotate_z{
width: 200px;
height: 100px;
background-color: #F30;
border: 1px solid #0099da;
 }
.rotate_z_angle{
-webkit-transform: rotateZ(90deg); 
transform: rotateZ(90deg); 
width: 200px;
height: 100px;
background-color: #F30;
border: 1px solid #0099da;
 }
</style>
</head>

<body>
 
<div class="rotate_z">
www.freetimelearning.com
</div><br><br><br>
 
<div class="rotate_z_angle">
www.freetimelearning.com
</div>
 
</body>
</html>

Output :

www.freetimelearning.com

CSS3 Tutorial