CSS 3D Transforms
BLUF: Styling is what brings the web to life, and mastering CSS 3D Transforms is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS 3D Transforms
CSS is all about presentation. Discover how CSS 3D Transforms works to transform plain HTML into a premium user experience in the guide below.
CSS 3D transformations allow you to reposition an element along the X-axis, Y-axis, and Z-axis. Here are some techniques for applying 3D transforms:
| 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.010.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.012.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 function is utilized to rotate an element along its X-axis based on the specified degree.
See this example:
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 C# Tutorial!
</div>
<div id="myDiv">
This is C# Tutorial!
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>
</body>
</html>
The 3D rotateY method (Y-axis rotation)
The CSS 3D rotateY function is employed to rotate an element along its Y-axis based on the specified angle.
See this example:
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 C# Programming!.
</div>
<div id="myDiv">
Welcome to C# Programming!.
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>
</body>
</html>
The 3D rotateZ method (Z-axis rotation)
The CSS 3D rotateZ function is employed to rotate an element around its Z-axis based on the specified angle.
See this example: >
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 C# Programming!
</div>
<div id="myDiv">
Welcome to C# Programming!
</div>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>
</body>
</html>
