diff options
Diffstat (limited to 'files/ja/web/css/@media/-webkit-transform-3d')
-rw-r--r-- | files/ja/web/css/@media/-webkit-transform-3d/index.html | 73 | ||||
-rw-r--r-- | files/ja/web/css/@media/-webkit-transform-3d/index.md | 67 |
2 files changed, 67 insertions, 73 deletions
diff --git a/files/ja/web/css/@media/-webkit-transform-3d/index.html b/files/ja/web/css/@media/-webkit-transform-3d/index.html deleted file mode 100644 index 62650ee16c..0000000000 --- a/files/ja/web/css/@media/-webkit-transform-3d/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: '-webkit-transform-3d' -slug: Web/CSS/@media/-webkit-transform-3d -tags: - - '@media' - - CSS - - WebKit 拡張 - - メディア特性 - - リファレンス - - 標準外 -translation_of: Web/CSS/@media/-webkit-transform-3d ---- -<div>{{ Non-standard_header }}</div> - -<p><a href="/ja/docs/CSS">CSS</a> の <strong><code>-webkit-transform-3d</code></strong> <a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">メディア特性</a> は <a href="/ja/docs/Web/CSS/Webkit_Extensions">Chrome 拡張</a>で、真偽値型であり、ベンダー接頭辞付きの CSS 3D {{cssxref("transform")}} に対応していれば値が <code>true</code> になります。</p> - -<div class="note"> -<p><strong>メモ:</strong> このメディア特性は WebKit および Blink でのみ対応しています。可能であれば、 {{cssxref("@supports")}} 特性クエリを代わりに使用してください。</p> -</div> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: css">@media (-webkit-transform-3d) { - .foo { - transform-style: preserve-3d; - } -} - -@media (-webkit-transform-3d: 1) { - .foo { - transform-style: preserve-3d; - } -}</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Compat', '#css-media-queries-webkit-transform-3d', '-webkit-transform-3d')}}</td> - <td>{{Spec2('Compat')}}</td> - <td>初回の標準化</td> - </tr> - <tr> - <td><a class="external" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3">Safari CSS Reference<br> - <small>'media query extensions' in that document.</small></a></td> - <td>標準外の非公式文書</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.at-rules.media.-webkit-transform-3d")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("@media/-webkit-transform-2d", "-webkit-transform-2d")}}</li> - <li>{{cssxref("@media/-webkit-transition", "-webkit-transition")}}</li> - <li>{{cssxref("@media/-webkit-animation", "-webkit-animation")}}</li> - <li><a href="http://www.quirksmode.org/css/tests/mediaqueries/animation.html">Test page at quirksmode.org</a></li> -</ul> - -<div>{{ CSSRef }}</div> diff --git a/files/ja/web/css/@media/-webkit-transform-3d/index.md b/files/ja/web/css/@media/-webkit-transform-3d/index.md new file mode 100644 index 0000000000..f792d819bc --- /dev/null +++ b/files/ja/web/css/@media/-webkit-transform-3d/index.md @@ -0,0 +1,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 }} |