transforms
transforms
This page has been flagged with the following issues:
High-level issues:
Summary
Transforms are a css property and associated functions that allows a developer to translate, rotate, skew, and scale elements. By carefully defining functions and associated CSS properties, a developer can hack together a pretty complex 3d looking scene.
Property of css/transforms
Syntax
var result = element.transform; element.transform = value;
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%;
}
Notes
Remarks
The version of this property using a vendor prefix, -ms-transform, has been deprecated in Internet Explorer 10 and later. To ensure compatibility in the future, applications using this property with a vendor prefix should be updated accordingly. 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. 3-D transforms are only supported in Internet Explorer 10 and later. For information about the transformation functions that are supported for use with the transform property, see Transform Functions.
Syntax
transform: none |
<transform-function>
[
<transform-function>
] *
Standards information
- CSS Transforms Module, Level 3, Section 6
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
… further results
Related pages (MSDN)
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here