transform property

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 Toblock-level and inline-level elements
Mediavisual
Inheritedno
Initial Valuenone

Standards information

Remarks

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

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 50 pixels in the x direction and 10 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 45 degrees clockwise around the origin point set by the transform-origin property.



div {
   width: 100px;
   height: 100px;
   background-color: #D3D3D3;
   border: solid 2px; #000;
}
#mytransform {
  transform: translate(50px, 10px) scale(.75, .75) rotate(45deg);
  transform-origin: 60% 100%;
}

In image below, you can see the original element and the element after the transform property has been used.

An original element and an element with the transform property applied

See also

CSSStyleDeclaration
currentStyle
style
transform-origin
How to bring your webpage to life with CSS transforms, transitions, and animations

 

 

Show:
© 2014 Microsoft. All rights reserved.