rotate3d()

< css‎ | functions
Jump to: navigation, search

rotate3d()

This article is Ready to Use.



Summary

Defines a three-dimensional rotation transformation by first defining the axis of rotation as an (x,y,z) vector and then defining the angle to rotate the element around this axis. Requires four parameters: the first three are unitless numbers defining the axis vector, and the fourth is an angle measurement (specifying degrees or radians).

Examples

View live exampleThe 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.)

CSS

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

Notes

Remarks

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.

Syntax

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

Parameters

number
A component of the direction vector about which the element is rotated.
angle
The angle by which the element is rotated. This value is expressed as a number followed by a supported angle unit.

Standards information

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related articles

Transforms







































  • css/functions/rotate3d()












… further results


Related pages (MSDN)

Related pages (HTML5Rocks)

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]

Portions of this content come from HTML5Rocks! article