transform property (Internet Explorer)

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.

This topic has not yet been rated - Rate this topic

Gets or sets a list of one or more transform functions that specify how to translate, rotate, or scale an element in 2-D or 3-D space.

This property is read/write.

CSS Transforms Module, Level 3, Section 6

Syntax

transform: none | <transform-function> [ <transform-function> ] *

Property values

transform-function: One or more transformation functions, separated by whitespace, applied in the order specified.
none: Keyword that indicates no transformation function is applied.

CSS information

Applies To	block-level and inline-level elements
Media	visual
Inherited	no
Initial Value	none

Standards information

CSS Transforms Module, Level 3, Section 6

Remarks

The version of this property using a vendor prefix, -ms-transform, has been deprecated in Internet Explorer 10 and later. However, be aware that -ms-transform is the only form of this property that is recognized by Windows Internet Explorer 9, which supports 2-D Cascading Style Sheets (CSS) transforms. To ensure maximum compatibility, specify a cascade such as the following, where the prefixed versions of the property come before the unprefixed version.

CSS


#mytransform {
  ...
  -ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
  -webkit-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
  -moz-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
  transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
}

For information about the transformation functions that are supported for use with the transform property, see Transform Functions.

To learn more about CSS transforms in Windows Internet Explorer, see How to bring your webpage to life with CSS transforms, transitions, and animations.

Examples

The following example is an ID selector that demonstrates the use of both the transform and the transform-origin properties. In this case, the transform-origin property has been set to "60% 100%", which sets the transform's origin point to 60% of the length and 100% of the height of the element to be transformed. The transform property first uses the translate function to move the element 200 pixels in the x direction and 100 pixels in the y direction. It then uses the scale function to scale the element by 75%. Finally, it uses the rotate function to rotate the element 40 degrees clockwise around the origin point set by the transform-origin property.


#mytransform {
  transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
  transform-origin: 60% 100%;
}

transform property