WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 3D Transforms


CSS3 3D Transforms

CSS3 empowers you to organize your parts using 3D transformations.

You can kill all progressions associated with a part using the none limit: change: none;

Mouse over the parts underneath to see the difference between a 2D additionally, a 3D transformation:

2D rotate
3D rotate

Browser Support for 3D Transforms

The numbers in the table decide the essential program structure that totally reinforces the property.

Numbers sought after by - webkit-, - moz-, or - o-demonstrate the primary structure 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-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

In this part you will get some answers concerning the going with 3D change methods:

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

The rotateX() Method

Rotate X

The rotateX() method rotates a part around its X-center point at a given degree:

Example

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

The rotateY() Method

Rotate Y

The rotateY() method rotates a part around its Y-center point at a given degree:

Example

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

The rotateZ() Method

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

Example

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