blob: f792d819bcc2cb74dcc6dcc2dcb5b657be5f32a2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
---
title: '-webkit-transform-3d'
slug: Web/CSS/@media/-webkit-transform-3d
tags:
- '-webkit-transform-3d'
- 3D
- '@media'
- CSS
- 標準外
- リファレンス
- WebKit
- メディア特性
- transform
browser-compat: css.at-rules.media.-webkit-transform-3d
translation_of: Web/CSS/@media/-webkit-transform-3d
---
{{ Non-standard_header }}
**`-webkit-transform-3d`** は [CSS](/ja/docs/Web/CSS) の論理[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で [Chrome 拡張](/ja/docs/Web/CSS/WebKit_Extensions)であり、ベンダー接頭辞付きの CSS 3D {{cssxref("transform")}} に対応していれば値が `true` になります。
> **Note:** このメディア特性は WebKit および Blink でのみ対応しています。可能であれば、 {{cssxref("@supports")}} 特性クエリーを代わりに使用してください。
## 構文
`-webkit-transform-3d` は [CSS](/ja/docs/Web/CSS) の論理[メディア特性](/ja/docs/Web/CSS/@media#メディア特性)で [Chrome 拡張](/ja/docs/Web/CSS/WebKit_Extensions)であり、ベンダー接頭辞付きの CSS 3D {{cssxref("transform")}} に対応していれば値が `true` になります。
### Values
- `true`
- : ブラウザーは三次元の CSS 座標変換に `-webkit` の接頭辞つきで対応しています。
- `false`
- : 三次元の CSS 座標変換で `-webkit` の接頭辞が付いたものはブラウザーが対応していません。
## 例
### -webkit-transform-3d のメディアクエリーの例
```css
@media (-webkit-transform-3d) {
.foo {
transform-style: preserve-3d;
}
}
@media (-webkit-transform-3d: 1) {
.foo {
transform-style: preserve-3d;
}
}
```
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}
- {{cssxref("@media/-webkit-transition", "-webkit-transition")}}
- {{cssxref("@media/-webkit-animation", "-webkit-animation")}}
- [Test page at quirksmode.org](http://www.quirksmode.org/css/tests/mediaqueries/animation.html)
{{ CSSRef }}
|
