WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 3D Transforms


CSS3 allows you to format elements using 3D transformations.

In this chapter, you will learn some of the 3D transformation methods:

  • rotateX ()
  • rotateY ()

Browser Support for 3D Transforms

The numbers in the table indicate the first browser version number that supports this attribute.

The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports this prefix attribute.

Property
transform 36.0
12.0 - webkit-
12.0 10.0 16.0
10.0 - moz-
4.0 - webkit- 23.0
15.0 - webkit-
transform-origin
(three-regard syntax)
36.0
12.0 - webkit-
12.0 10.0 16.0
10.0 - moz-
4.0 - webkit- 23.0
15.0 - webkit-
transform-style 36.0
12.0 - webkit-
12.0 11.0 16.0
10.0 - moz-
4.0 - webkit- 23.0
15.0 - webkit-
perspective 36.0
12.0 - webkit-
12.0 10.0 16.0
10.0 - moz-
4.0 - webkit- 23.0
15.0 - webkit-
perspective-origin 36.0
12.0 - webkit-
12.0 10.0 16.0
10.0 - moz-
4.0 - webkit- 23.0
15.0 - webkit-
backface-visibility 36.0
12.0 - webkit-
12.0 10.0 16.0
10.0 - moz-
4.0 - webkit- 23.0
15.0 - webkit-

CSS3 3D Transforms

The rotateX () method, which rotates the element around the X axis at a given degree.:

  • rotateX()
  • rotateY()
  • rotateZ()

The rotateX() Method

Rotate X

The rotateX () method, which rotates the element around the X axis at a given degree.:

Example

div {
    -webkit-transform: rotateX(160deg);/* Safari */
    transform: rotateX(160deg);
}
Try it yourself »

The rotateY() Method

Rotate Y

The rotateY () method rotates an element around the Y axis at a given degree:

Example

div {
    -webkit-transform: rotateY(120deg);/* Safari */
    transform: rotateY(120deg);
}
Try it yourself »

The rotateZ() Method

The rotateZ() method rotates a element around its Z-center point at a given degree:

Example

div {
    -webkit-transform: rotateZ(90deg);/* Safari */
    transform: rotateZ(90deg);
}
Try it yourself »