{ "caniuse": [ "transforms3d" ], "compat_features": [ "css.properties.backface-visibility", "css.properties.perspective", "css.properties.perspective-origin", "css.properties.perspective-origin.bottom", "css.properties.perspective-origin.center", "css.properties.perspective-origin.left", "css.properties.perspective-origin.right", "css.properties.perspective-origin.top", "css.properties.perspective.none", "css.properties.transform-style", "css.properties.transform.3d", "css.types.transform-function.matrix3d", "css.types.transform-function.perspective", "css.types.transform-function.perspective.none", "css.types.transform-function.rotate3d", "css.types.transform-function.rotateX", "css.types.transform-function.rotateY", "css.types.transform-function.rotateZ", "css.types.transform-function.scale3d", "css.types.transform-function.scaleZ", "css.types.transform-function.translate3d", "css.types.transform-function.translateZ" ], "description": "The transform CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.", "description_html": "The transform CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.", "group": [ "transforms" ], "kind": "feature", "name": "3D transforms", "spec": [ "https://drafts.csswg.org/css-transforms-2/" ], "status": { "baseline": "high", "baseline_high_date": "2024-09-14", "baseline_low_date": "2022-03-14", "by_compat_key": { "css.properties.backface-visibility": { "baseline": "high", "baseline_high_date": "2024-09-14", "baseline_low_date": "2022-03-14", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "15.4", "safari_ios": "15.4" } }, "css.properties.perspective": { "baseline": "high", "baseline_high_date": "2018-03-30", "baseline_low_date": "2015-09-30", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "9", "safari_ios": "9" } }, "css.properties.perspective-origin": { "baseline": "high", "baseline_high_date": "2018-03-30", "baseline_low_date": "2015-09-30", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "9", "safari_ios": "9" } }, "css.properties.perspective-origin.bottom": { "baseline": "high", "baseline_high_date": "2018-03-30", "baseline_low_date": "2015-09-30", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "9", "safari_ios": "9" } }, "css.properties.perspective-origin.center": { "baseline": "high", "baseline_high_date": "2018-03-30", "baseline_low_date": "2015-09-30", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "9", "safari_ios": "9" } }, "css.properties.perspective-origin.left": { "baseline": "high", "baseline_high_date": "2018-03-30", "baseline_low_date": "2015-09-30", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "9", "safari_ios": "9" } }, "css.properties.perspective-origin.right": { "baseline": "high", "baseline_high_date": "2018-03-30", "baseline_low_date": "2015-09-30", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "9", "safari_ios": "9" } }, "css.properties.perspective-origin.top": { "baseline": "high", "baseline_high_date": "2018-03-30", "baseline_low_date": "2015-09-30", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "9", "safari_ios": "9" } }, "css.properties.perspective.none": { "baseline": "high", "baseline_high_date": "2018-03-30", "baseline_low_date": "2015-09-30", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "9", "safari_ios": "9" } }, "css.properties.transform-style": { "baseline": "high", "baseline_high_date": "2018-03-30", "baseline_low_date": "2015-09-30", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "9", "safari_ios": "9" } }, "css.properties.transform.3d": { "baseline": "high", "baseline_high_date": "2018-03-30", "baseline_low_date": "2015-09-30", "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "9", "safari_ios": "9" } }, "css.types.transform-function.matrix3d": { "baseline": "high", "baseline_high_date": "2018-01-29", "baseline_low_date": "2015-07-29", "support": { "chrome": "12", "chrome_android": "18", "edge": "12", "firefox": "10", "firefox_android": "10", "safari": "4", "safari_ios": "3.2" } }, "css.types.transform-function.perspective": { "baseline": "high", "baseline_high_date": "2018-01-29", "baseline_low_date": "2015-07-29", "support": { "chrome": "12", "chrome_android": "18", "edge": "12", "firefox": "10", "firefox_android": "10", "safari": "4", "safari_ios": "3.2" } }, "css.types.transform-function.perspective.none": { "baseline": "high", "baseline_high_date": "2024-09-14", "baseline_low_date": "2022-03-14", "support": { "chrome": "97", "chrome_android": "97", "edge": "97", "firefox": "93", "firefox_android": "93", "safari": "15.4", "safari_ios": "15.4" } }, "css.types.transform-function.rotate3d": { "baseline": "high", "baseline_high_date": "2018-01-29", "baseline_low_date": "2015-07-29", "support": { "chrome": "12", "chrome_android": "18", "edge": "12", "firefox": "10", "firefox_android": "10", "safari": "4", "safari_ios": "3.2" } }, "css.types.transform-function.rotateX": { "baseline": "high", "baseline_high_date": "2018-01-29", "baseline_low_date": "2015-07-29", "support": { "chrome": "12", "chrome_android": "18", "edge": "12", "firefox": "10", "firefox_android": "10", "safari": "4", "safari_ios": "3.2" } }, "css.types.transform-function.rotateY": { "baseline": "high", "baseline_high_date": "2018-01-29", "baseline_low_date": "2015-07-29", "support": { "chrome": "12", "chrome_android": "18", "edge": "12", "firefox": "10", "firefox_android": "10", "safari": "4", "safari_ios": "3.2" } }, "css.types.transform-function.rotateZ": { "baseline": "high", "baseline_high_date": "2018-01-29", "baseline_low_date": "2015-07-29", "support": { "chrome": "12", "chrome_android": "18", "edge": "12", "firefox": "10", "firefox_android": "10", "safari": "4", "safari_ios": "3.2" } }, "css.types.transform-function.scale3d": { "baseline": "high", "baseline_high_date": "2018-01-29", "baseline_low_date": "2015-07-29", "support": { "chrome": "12", "chrome_android": "18", "edge": "12", "firefox": "10", "firefox_android": "10", "safari": "4", "safari_ios": "3.2" } }, "css.types.transform-function.scaleZ": { "baseline": "high", "baseline_high_date": "2018-01-29", "baseline_low_date": "2015-07-29", "support": { "chrome": "12", "chrome_android": "18", "edge": "12", "firefox": "10", "firefox_android": "10", "safari": "4", "safari_ios": "3.2" } }, "css.types.transform-function.translate3d": { "baseline": "high", "baseline_high_date": "2018-01-29", "baseline_low_date": "2015-07-29", "support": { "chrome": "12", "chrome_android": "18", "edge": "12", "firefox": "10", "firefox_android": "10", "safari": "4", "safari_ios": "3.2" } }, "css.types.transform-function.translateZ": { "baseline": "high", "baseline_high_date": "2018-01-29", "baseline_low_date": "2015-07-29", "support": { "chrome": "12", "chrome_android": "18", "edge": "12", "firefox": "10", "firefox_android": "10", "safari": "4", "safari_ios": "3.2" } } }, "support": { "chrome": "36", "chrome_android": "36", "edge": "12", "firefox": "16", "firefox_android": "16", "safari": "15.4", "safari_ios": "15.4" } }, "id": "transforms3d", "groups": [ "transforms" ], "specs": [ { "url": "https://drafts.csswg.org/css-transforms-2/", "seriesComposition": "delta", "shortname": "css-transforms-2", "series": { "shortname": "css-transforms", "currentSpecification": "css-transforms-1", "title": "CSS Transforms", "shortTitle": "CSS Transforms", "releaseUrl": "https://www.w3.org/TR/css-transforms/", "nightlyUrl": "https://drafts.csswg.org/css-transforms/" }, "seriesVersion": "2", "seriesPrevious": "css-transforms-1", "organization": "W3C", "groups": [ { "name": "Cascading Style Sheets (CSS) Working Group", "url": "https://www.w3.org/groups/wg/css/" } ], "release": { "url": "https://www.w3.org/TR/css-transforms-2/", "status": "Working Draft", "filename": "Overview.html" }, "nightly": { "url": "https://drafts.csswg.org/css-transforms-2/", "status": "Editor's Draft", "alternateUrls": [ "https://w3c.github.io/csswg-drafts/css-transforms-2/" ], "repository": "https://github.com/w3c/csswg-drafts", "sourcePath": "css-transforms-2/Overview.bs", "filename": "index.html" }, "title": "CSS Transforms Module Level 2", "source": "w3c", "shortTitle": "CSS Transforms 2", "categories": [ "browser" ], "standing": "good", "tests": { "repository": "https://github.com/web-platform-tests/wpt", "testPaths": [ "css/css-transforms" ] }, "fragment": null } ], "mdnUrls": [ { "slug": "Web/CSS/Reference/Properties/transform", "title": "`transform` CSS property", "anchor": null, "url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Properties/transform" } ], "standardPositions": [], "hasNegativeStandardPosition": false, "stateOfSurveys": [], "chromeUseCounters": {}, "interop": [ { "year": 2021, "label": "interop-2021-transforms", "url": "https://wpt.fyi/interop-2021?feature=interop-2021-transforms" }, { "year": 2022, "label": "interop-2021-transforms", "url": "https://wpt.fyi/interop-2022?feature=interop-2021-transforms" }, { "year": 2023, "label": "interop-2021-transforms", "url": "https://wpt.fyi/interop-2023?feature=interop-2021-transforms" } ], "wpt": { "url": "https://wpt.fyi/results?q=feature:transforms3d" }, "developerSignals": null, "bugs": { "chrome": [ "https://bugs.chromium.org/p/chromium/issues/detail?id=1253596", "https://bugs.chromium.org/p/chromium/issues/detail?id=1008483" ] }, "baselineLowDateAsObject": "2022-03-14T00:00:00.000Z", "baselineHighDateAsObject": "2024-09-14T00:00:00.000Z" }