Web/CSS/@media/-webkit-transform-3d

From Get docs

Non-standard This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.


The -webkit-transform-3d Boolean CSS media feature is a Chrome extension whose value is true if vendor-prefixed CSS 3D transforms are supported.

Note: This media feature is only supported by WebKit and Blink. If possible, use an @supports feature query instead.


Syntax

-webkit-transform-3d is a Boolean CSS media feature whose value is true if the browser supports -webkit prefixed CSS 3D transforms.

Values

true
The browser supports the 3D CSS transforms with the -webkit prefix.
false
The 3D CSS transforms prefixed with -webkit are not supported by the browser.

Examples

Examples of media queries with -webkit-transform-3d

@media (-webkit-transform-3d) {
  .foo {
    transform-style: preserve-3d;
  }
}

@media (-webkit-transform-3d: 1) {
  .foo {
    transform-style: preserve-3d;
  }
}

Specifications

Specification Status Comment
Compatibility StandardThe definition of '-webkit-transform-3d' in that specification. Living Standard Initial standardization
[https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3 Safari CSS Reference

'media query extensions' in that document.]

Non-standard unofficial documentation Initial documentation

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet

-webkit-transform-3d media feature

Non-standard'

Chrome

No support 2 — 36

Edge

No support 12 — 79

Firefox Full support 49


Full support 49


Full support 46

Disabled'

Disabled' From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

IE

No support No

Opera

No support 15 — 23

Safari

Full support 4

WebView Android

No support ≤37 — ≤37

Chrome Android

No support 18 — 36

Firefox Android Full support 49


Full support 49


Full support 46

Disabled'

Disabled' From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

Opera Android

No support 14 — 24

Safari iOS

Full support 3.2

Samsung Internet Android

No support 1.0 — 3.0

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.'
Non-standard. Expect poor cross-browser support.
User must explicitly enable this feature.'
User must explicitly enable this feature.


See also