このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
transform-style
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年9月以降、すべてのブラウザーで利用可能です。
transform-style は CSS のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。
試してみましょう
transform-style: flat;
transform-style: preserve-3d;
<section class="default-example" id="default-example">
<div class="transition-all layer" id="example-element">
<p>親</p>
<div class="numeral"><code>rotate3d(1, 1, 1, 45deg)</code></div>
</div>
</section>
.layer {
background: #623e3f;
border-radius: 0.75rem;
color: white;
transform: perspective(200px) rotateY(30deg);
}
.numeral {
background-color: #ffba08;
border-radius: 0.2rem;
color: black;
margin: 1rem;
padding: 0.2rem;
transform: rotate3d(1, 1, 1, 45deg);
}
平面化した場合、子要素は自身の 3D 空間に存在しなくなります。
このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。
構文
/* キーワード値 */
transform-style: flat;
transform-style: preserve-3d;
/* グローバル値 */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;
値
flat-
要素の子要素を要素自身の平面上に配置することを示します。
preserve-3d-
要素の子要素を 3D 空間に配置することを示します。
解説
仕様書にはいくつかのグループ化プロパティ値が掲載されており、これらは適用前に子孫要素の平坦化された表現を生成することをユーザーエージェントに要求するため、preserve-3d が指定されている場合でも、要素に使用値 transform-style: flat を強制します。これらのプロパティ値には以下のものがあります。
overflow:visibleまたはclip以外の任意の値。opacity:1未満の任意の値。filter:none以外の任意の値。clip:auto以外の任意の値。clip-path:none以外の任意の値。isolation:isolateの使用値。mask-image:none以外の任意の値。mask-border-source:none以外の任意の値。mix-blend-mode:normal以外の任意の値。contain:paintおよび描画の抑制を発生させるその他のプロパティと値の組み合わせ。これには、containプロパティの使用されている値に影響を与えるあらゆるプロパティ、例えばcontent-visibility: hiddenなどが含まれます。
公式定義
| 初期値 | flat |
|---|---|
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
| 重ね合わせコンテキストの生成 | あり |
形式文法
transform-style =
flat |
preserve-3d
例
座標変換スタイルのデモ
この例では、座標変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で transform-style: preserve-3d が設定されているため、3D 空間で座標変換され、意図したとおりに表示されます。
また、これと transform-style: flat の間で切り替えられるチェックボックスも用意しました。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。
HTML
<section id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</section>
<div class="checkbox">
<label for="preserve"><code>preserve-3d</code></label>
<input type="checkbox" id="preserve" checked />
</div>
CSS
#example-element {
margin: 50px;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotate3d(1, 1, 1, 30deg);
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 70%);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 70%);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}
JavaScript
const cube = document.getElementById("example-element");
const checkbox = document.getElementById("preserve");
checkbox.addEventListener("change", () => {
cube.style.transformStyle = checkbox.checked ? "preserve-3d" : "flat";
});
結果
仕様書
| 仕様書 |
|---|
| CSS Transforms Module Level 2 # transform-style-property |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。