3D transformsBaseline · Widely available
The transform CSS property and its 3D transform functions allow rotations and other transforms in three dimensions, including perspective transforms.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 14, 2022. Widely available since Sep 14, 2024.
Browser support
DesktopChrome
1–35Not supported
36+Supportedsince Jul 16, 2014
Current: 155Edge
12+Supportedsince Jul 29, 2015
Current: 154Firefox
1–15Not supported
16+Supportedsince Oct 9, 2012
Current: 157Safari
1–15.3Not supported
15.4+Supportedsince Mar 14, 2022
Current: 27MobileChrome Android
18–35Not supported
36+Supportedsince Jul 16, 2014
Current: 155Firefox Android
4–15Not supported
16+Supportedsince Oct 9, 2012
Current: 157Safari iOS
1–15.3Not supported
15.4+Supportedsince Mar 14, 2022
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: backface-visibility.
Feature detection
CSS · check before using
@supports (backface-visibility: initial) {
/* styles that rely on backface-visibility */
}
/* or in JavaScript */
if (CSS.supports("backface-visibility", "initial")) {
// use it
}Sub-features
Support for each part of the feature (22). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| backface-visibility | 36 | 12 | 16 | 15.4 | 36 | 16 | 15.4 |
| perspective | 36 | 12 | 16 | 9 | 36 | 16 | 9 |
| perspective-origin | 36 | 12 | 16 | 9 | 36 | 16 | 9 |
| perspective-origin.bottom | 36 | 12 | 16 | 9 | 36 | 16 | 9 |
| perspective-origin.center | 36 | 12 | 16 | 9 | 36 | 16 | 9 |
| perspective-origin.left | 36 | 12 | 16 | 9 | 36 | 16 | 9 |
| perspective-origin.right | 36 | 12 | 16 | 9 | 36 | 16 | 9 |
| perspective-origin.top | 36 | 12 | 16 | 9 | 36 | 16 | 9 |
| perspective.none | 36 | 12 | 16 | 9 | 36 | 16 | 9 |
| transform-style | 36 | 12 | 16 | 9 | 36 | 16 | 9 |
| transform.3d | 36 | 12 | 16 | 9 | 36 | 16 | 9 |
| <transform-function>.matrix3d | 12 | 12 | 10 | 4 | 18 | 10 | 3.2 |
| <transform-function>.perspective | 12 | 12 | 10 | 4 | 18 | 10 | 3.2 |
| <transform-function>.perspective.none | 97 | 97 | 93 | 15.4 | 97 | 93 | 15.4 |
| <transform-function>.rotate3d | 12 | 12 | 10 | 4 | 18 | 10 | 3.2 |
| <transform-function>.rotateX | 12 | 12 | 10 | 4 | 18 | 10 | 3.2 |
| <transform-function>.rotateY | 12 | 12 | 10 | 4 | 18 | 10 | 3.2 |
| <transform-function>.rotateZ | 12 | 12 | 10 | 4 | 18 | 10 | 3.2 |
| <transform-function>.scale3d | 12 | 12 | 10 | 4 | 18 | 10 | 3.2 |
| <transform-function>.scaleZ | 12 | 12 | 10 | 4 | 18 | 10 | 3.2 |
Show 2 more
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| <transform-function>.translate3d | 12 | 12 | 10 | 4 | 18 | 10 | 3.2 |
| <transform-function>.translateZ | 12 | 12 | 10 | 4 | 18 | 10 | 3.2 |