BASELINE NowYouCanUse.com

Widely Available Transforms

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 ↗

id: transforms2d