Transforms

Internet Explorer 10, as well as Windows apps using JavaScript for Windows 8 introduces support for Cascading Style Sheets, Level 3 (CSS3) 3-D transforms. Windows Internet Explorer 9 added support for CSS3 2-D transforms, and Windows apps using JavaScript support them as well. Transforms enable translation, rotation, and scaling of elements in 2-D and 3-D space without the need for a plug-in. CSS3 3-D transforms are defined by the World Wide Web Consortium (W3C) in the CSS Transforms specification, which is currently in the Working Draft stage.

Note  It is a good idea to become familiar with transform coordinate systems and rendering before attempting to specify 3-D transforms manually.

Note  The properties described in this topic previously required a Microsoft-specific vendor prefix, "-ms-", to work with Internet Explorer 10 and Windows apps using JavaScript. This prefix is no longer required, but will still be recognized. To ensure compatibility in the future, applications using the Microsoft vendor prefix with transform properties should be updated accordingly.

The transform property

You apply both 2-D and 3-D transforms to an element by using the transform property, which contains a list of transform functions. The property's syntax is as follows:

Supported Transform Functions

Following is a list of transform functions supported in Internet Explorer 10, as well as Windows apps using JavaScript for Windows 8. Each one is followed by a brief markup sample and an image demonstrating the sample's effect. (To view the supported 2-D transform functions, see Transform Functions.)

Remember that order matters! Transform functions are applied in the order they are listed within the transform property.

Also, the effects of functions with a z-axis component are most evident when used in combination with the perspective function, which gives them depth. In the markup samples and images that follow, the perspective function and others have been added to the transform property to make the effect of the illustrated function more obvious. You are encouraged to see the effect of different function and value combinations by trying out the Hands On: 3-D Transforms demo on the IE Test Drive.

Perspective

perspective(<length>)

The perspective function changes the perspective through which an element is viewed, giving an illusion of depth. As the value supplied to the perspective function increases, the further away from the viewer the element will appear. The value must be greater than 0 and is given in pixels.

The units of <length> are the same as supplied to any of the translation functions—that is, 1px in the z-direction is the same distance as 1px in the x- or y-directions.

3-D matrix

matrix3d(<number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>, <number>)

The matrix3d function specifies a 3-D transformation as a 4×4 homogeneous matrix of sixteen values in column-major order. All other transformation functions are based on the matrix3d function.

Example:

div {
  transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

Result:

3-D translate

translate3d(<translation-value>, <translation-value>, <translation-value>)

The translate3D function specifies a 3-D translation by the vector [tx,ty,tz], where tx, ty, and tz are the first, second, and third translation-value parameters respectively.

Example:

div {
  transform: translate3d(20px, -60px, 50px); 
}

Result:

(The light-blue square indicates the original position of the transformed element.)

Z-direction translate

translateZ(<translation-value>)

The translateZ function specifies a translation by a given amount in the z-direction. Percentage values are not allowed.

Example:

div {    
  transform: perspective(500px) translateZ(-60px);
}

Result:

(The light-blue square indicates the original position of the transformed element.)

3-D scale

scale3d(<number>, <number>, <number>)

The scale3d function specifies a 3-D scale operation by the [sx,sy,sz] scaling vector described by the three parameters.

Example:

div {
  transform: scale3d(0.5, -0.5, 1.5);
}

Result:

(The light-blue square indicates the original position of the transformed element.)

Z-vector scale

scaleZ(<number>)

The scaleZ function specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter. The effect of the scaleZ function is most evident when used in combination with functions such as the rotate and perspective functions, as shown in the following example.

Example:

div {
  transform: perspective(500px) scaleZ(2) rotateX(45deg);
}

Result:

(The light-blue square indicates the original position of the transformed element.)

3-D rotate

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

The rotate3d function specifies a clockwise 3-D rotation. 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.

Example:

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

Result:

(The light-blue square indicates the original position of the transformed element.)

X-direction rotate

rotateX(<angle>)

The rotateX function specifies a clockwise rotation by the given angle about the x-axis.

Example:

div {
  transform: perspective(500px) rotateX(45deg);
}

Result:

(The light-blue square indicates the original position of the transformed element.)

Y-direction rotate

rotateY(<angle>)

The rotateY function specifies a clockwise rotation by the given angle about the y-axis.

Example:

div {
  transform: perspective(500px) rotateY(45deg);
}

Result:

(The light-blue square indicates the original position of the transformed element.)

Z-direction rotate

rotateZ(<angle>)

The rotateZ function specifies a clockwise rotation by the given angle about the z-axis.

Example:

div {
  transform: rotateZ(65deg);
}

Result:

(The light-blue square indicates the original position of the transformed element.)

The transform-origin property

The transform-origin property establishes the origin of transformation for an element.

For instance, if you specified the rotate3d function in the transform property, this property would define the point around which the element would rotate. The default value of this property is "50% 50% 0px" (the middle of the element).

The transform-style property

The transform-style property defines how nested elements are rendered in 3-D space.

The example below shows how nested 3-D transforms are rendered when transform-style is set to flat. The blue element is rendering with the perspective that is applied to its parent element. The gray element is rendered into the plane of its parent, the blue element, because it is not a member of a 3-D rendering context. The gray element is being flattened.

div {
  width: 200px;
  height: 200px;
}
.container {
  border: 1px solid #000000;
  perspective: 500px;
  margin-top: 50px;
}
.blue {
  transform: rotateY(45deg);
  background-color: #0087FF;
  transform-style: flat;
}
.gray {
  transform-origin: top left;
  transform: rotateX(45deg);
  background-color: #808080;
}

<div class="container">
  <div class="blue">
      <div class="gray"></div>
  </div>
</div>

If transform-style is set to preserve-3d in the same example, the results would look like the following image. The blue element establishes a 3-D rendering context, and the gray element is a member of it. Because both the blue and the grey elements share a common 3-D space, the gray element renders as tilting out from its parent.

The perspective property

The perspective property applies the same transform as the perspective transform function, except that it applies only to the positioned or transformed children of the element, not to the transform on the element itself.

The perspective-origin property

The perspective-origin property establishes the origin for the perspective property.

The backface-visibility property

The backface-visibility property indicates whether the "back face" (reverse side) of a transformed element is visible when facing the viewer. With an element that is not transformed, the front side of the element faces the viewer.

API Reference

Transforms

Samples and tutorials

How to bring your webpage to life with CSS transforms, transitions, and animations

Internet Explorer Test Drive demos

Bringing pages alive with CSS Transforms & Animations

Hands On: 3D Transforms

Hands On: 2D Transforms

Flickr Postcards

IEBlog posts

Full-page Animations Using CSS

CSS3 3D Transforms in IE10

Specification

CSS Transforms

Related topics

Understanding CSS3 2D Transforms