CSS 3D Transforms

CSS 3D Transforms Tutorials and examples on inline, file, selector, background, border, display, float, font, margin, opacity, overflow, padding, position, text-align

CSS 3D Transforms

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:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div {  
  6.     width: 300px;  
  7.     height: 100px;  
  8.     background-color: lightpink;  
  9.     border: 1px solid black;  
  10. }  
  11. div#myDiv {  
  12.     -webkit-transform: rotateX(150deg); /* Safari */  
  13.     transform: rotateX(150deg); /* Standard syntax */  
  14. }  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div>  
  19. This is JavaTpoint!  
  20. </div>  
  21. <div id="myDiv">  
  22. This is Tpoint!  
  23. </div>  
  24. <p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>  
  25. </body>  
  26. </html> 

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:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div {  
  6.     width: 300px;  
  7.     height: 100px;  
  8.     background-color:lightpink;  
  9.     border: 1px solid black;  
  10. }  
  11.   
  12. div#myDiv {  
  13.     -webkit-transform: rotateY(150deg); /* Safari */  
  14.     transform: rotateY(150deg); /* Standard syntax */  
  15. }  
  16. </style>  
  17. </head>  
  18. <body>  
  19. <div>  
  20. Welcome to JavaTpoint!.  
  21. </div>  
  22. <div id="myDiv">  
  23. Welcome to Tpoint!.  
  24. </div>  
  25. <p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY() method.</p>  
  26. </body>  
  27. </html> 

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:>

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div {  
  6.     width: 300px;  
  7.     height: 100px;  
  8.     background-color: yellow;  
  9.     border: 1px solid black;  
  10. }  
  11. div#myDiv {  
  12.     -webkit-transform: rotateZ(90deg); /* Safari */  
  13.     transform: rotateZ(90deg); /* Standard syntax */  
  14. }  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div>  
  19. Welcome to JavaTpoint!  
  20. </div>  
  21. <div id="myDiv">  
  22. Welcome to Tpoint!  
  23. </div>  
  24. <p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.</p>  
  25. </body>  
  26. </html>