Aug. 24th,2021
プロパティについて
＃
概要
“transform-style”プロパティは要素の子要素を三次元空間内に配置するか、二次元平面上に配置するかを指定するプロパティです。
“transform-style”プロパティの値が“preserve-3d”である場合、要素は三次元描画コンテキストを生成するか、親要素が三次元描画コンテキストに参加していればその三次元描画コンテキストを拡張します。子要素は兄弟要素と共有された座標空間に配置され、三次元変形によって重なり合う順序を変更したり、交わらせたりすることができます。
“transform-style”プロパティの値が“preserve-3d”である場合、三次元変形されない子要素やコンテンツはZ座標が“z=0”の平面に描画されます。
“transform-style”プロパティの値が“preserve-3d”である場合、要素は新たな重ね合わせコンテキストと包含ブロックを生成します。
サンプルコード
div { transform-style: preserve-3d;}
＃
値
| 値 | 説明 |
|---|---|
| flat | 子要素を二次元平面上に配置する |
| preserve-3d | 子要素を三次元空間に配置する |
| 共通キーワード |
一部のプロパティと値の組み合わせは適用される前に一度子孫要素を平面上に構成する必要があります。このため、“transform-style”プロパティが以下のプロパティと同時に適用された場合、使用値は強制的に“flat”となります。
- 値が“visible”もしくは“clip”以外の“overflow”プロパティ
- 値が“1”よりも小さい“opacity”プロパティ
- 値が“none”以外の“filter”プロパティ
- 値が“auto”以外の“clip”プロパティ
- 値が“none”以外の“clip-path”プロパティ
- 値が“isolate”である“isolation”プロパティ
- 値が“none”以外の“mask-image”プロパティ
- 値が“none”以外の“mask-border-source”プロパティ
- 値が“normal”以外の“mix-blend-mode”プロパティ
- 値が“paint”である“contain”プロパティ、もしくはそれ以外のペイントの封じ込めを生じるプロパティと値の組み合わせ
＃
使用例
＃
子要素を三次元空間に配置
.sample-outer-box {
perspective: 800px;
transform-style: preserve-3d;
position: relative;
}
.sample-inner-box1 {
transform: rotate3d(1,-1,-1,45deg);
position: absolute;
background-color: #a8c97f; /* ■ */
}
.sample-inner-box1:hover {
transform: none;
}
.sample-inner-box2 {
transform: rotate3d(1,1,1,70deg);
position: absolute;
background-color: #83ccd2; /* ■ */
}
.sample-inner-box2:hover {
transform: none;
}
<div class="sample-outer-box-style-preserve-3d">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
<div class="sample-inner-box1">
猫
</div>
<div class="sample-inner-box2">
猫
</div>
</div>
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
猫
猫
＃
子要素を二次元平面に配置
.sample-outer-box {
perspective: 800px;
transform-style: flat;
position: relative;
}
.sample-inner-box1 {
transform: rotate3d(1,-1,-1,45deg);
position: absolute;
background-color: #a8c97f; /* ■ */
}
.sample-inner-box1:hover {
transform: none;
}
.sample-inner-box2 {
transform: rotate3d(1,1,1,70deg);
position: absolute;
background-color: #83ccd2; /* ■ */
}
.sample-inner-box2:hover {
transform: none;
}
<div class="css-supports-transform-style-flat">
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
<div class="sample-inner-box1">
猫
</div>
<div class="sample-inner-box2">
猫
</div>
</div>
夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。
猫
猫
