CSS 3D Transforms

The CSS 3D transforms facilitates you to move an element to X-axis, Y-axis and Z-axis. Following is a list of 3D transforms methods:

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

Supporting Browsers

Property	Chrome	IE	Firefox	Opera	Safari
transform	36.012.0 -webkit-	10.0	16.0 10.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
transform-origin (three-value syntax)	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
transform-style	36.012.0 -webkit-	11.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
perspective	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
perspective-origin	36.012.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-
backface-visibility	36.0 12.0 -webkit-	10.0	16.010.0 -moz-	23.015.0 -webkit-	9.04.0 -webkit-

The 3D rotateX() method (X-axis rotation)

The CSS 3D rotateX() method is used to rotate an element around its X-axis according to the given degree.

See this example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: lightpink;
    border: 1px solid black;
}
div#myDiv {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This is JavaTpoint!
</div>
<div id="myDiv">
This is JavaTpoint!
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>
</body>
</html>

Test it Now

The 3D rotateY() method (Y-axis rotation)

The CSS 3D rotateY() method is used to rotate an element around its Y-axis according to the given degree.

See this example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color:lightpink;
    border: 1px solid black;
}

div#myDiv {
    -webkit-transform: rotateY(150deg); /* Safari */
    transform: rotateY(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Welcome to JavaTpoint!.
</div>
<div id="myDiv">
Welcome to JavaTpoint!.
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>
</body>
</html>

Test it Now

The 3D rotateZ() method (Z-axis rotation)

The CSS 3D rotateZ() method is used to rotate an element around its Z-axis according to the given degree.

See this example:>

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}
div#myDiv {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Welcome to JavaTpoint!
</div>
<div id="myDiv">
Welcome to JavaTpoint!
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>
</body>
</html>

Test it Now

Next TopicCSS Aural Media

← prev next →