BASELINE NowYouCanUse.com

Widely Available Transforms

id: transforms2d

2D transforms

The transform CSS property and its 2D transform functions allow rotating, scaling, skewing, and translating an element. Arbitrary 2D transforms are also possible using a transformation matrix.

Baseline Status: Achieved Widely Available on Mar 30, 2018 (Cross-browser Newly Available since Sep 30, 2015).

Desktop Browser Engine Support

Google Chrome

36

Supported

Mozilla Firefox

16

Supported

Apple Safari

9

Supported

Microsoft Edge

12

Supported

Mobile Browser Engine Support

Chrome Android

36

Firefox Android

16

Safari iOS

9

Specifications and References

Specification ↗ Can I Use (transforms2d) ↗ Feature XML ↗

MDN Browser Compat Data Keys:

css.properties.transform ↗ css.properties.transform-origin ↗ css.properties.transform-origin.bottom ↗ css.properties.transform-origin.center ↗ css.properties.transform-origin.left ↗ css.properties.transform-origin.right ↗ css.properties.transform-origin.three_value_syntax ↗ css.properties.transform-origin.top ↗ css.properties.transform.none ↗ css.types.angle ↗ css.types.angle-percentage ↗ css.types.angle.deg ↗ css.types.angle.grad ↗ css.types.angle.rad ↗ css.types.angle.turn ↗ css.types.position ↗ css.types.position.four_value_syntax ↗ css.types.position.keyword_value_syntax ↗ css.types.transform-function ↗ css.types.transform-function.matrix ↗ css.types.transform-function.rotate ↗ css.types.transform-function.scale ↗ css.types.transform-function.scaleX ↗ css.types.transform-function.scaleY ↗ css.types.transform-function.skew ↗ css.types.transform-function.skewX ↗ css.types.transform-function.skewY ↗ css.types.transform-function.translate ↗ css.types.transform-function.translateX ↗ css.types.transform-function.translateY ↗