WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 3D Transforms


CSS3 3D Transforms

CSS3 allows you to format your elements using 3D transformations.

You can switch off all transformations applied to an element using the none function: transform: none;

Mouse over the elements below to see the difference between a 2D and a 3D transformation:

2D rotate
3D rotate

Browser Support for 3D Transforms

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

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

In this chapter you will learn about the following 3D transformation methods:

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

The rotateX() Method

Rotate X

The rotateX() method rotates an element around its 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 its 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 an element around its Z-axis at a given degree:

Example

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