Windows apps
Collapse the table of content
Expand the table of content
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

rotate3d() function

Specifies a clockwise 3-D rotation.

CSS Transforms Module, Level 3, Section 13.2Internet Explorer 10




( <number> , <number> , <number> , <angle> )



A component of the direction vector about which the element is rotated.


The angle by which the element is rotated. This value is expressed as a number followed by a supported angle unit.

Standards information


The element rotates by the angle specified in the last parameter, and about the [x,y,z] direction vector described by the first three parameters. If the direction vector is not of unit length, it will be normalized. A direction vector that cannot be normalized, such as [0, 0, 0], results in no rotation.


The following code snippet is an example of the rotate3d function in use. When applied to a square blue div element, it has the effect illustrated in the image. (The light-blue square indicates the original position of the transformed element.)

div {
   transform: rotate3d(0.7, 0.5, 0.7, 45deg);

A square blue div with white text, after having the following transform functions applied to it: -ms-transform: rotate3d(0.7, 0.5, 0.7, 45deg);

See also

Transform Functions
Mathematical Description of Transform Functions
Direct3D: Matrices
Hands On: 3-D Transforms



© 2016 Microsoft