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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: transform-style
slug: Web/CSS/transform-style
tags:
- CSS
- CSS プロパティ
- CSS 座標変換
- 実験的
- Reference
- recipe:css-property
browser-compat: css.properties.transform-style
translation_of: Web/CSS/transform-style
---
{{CSSRef}}
**`transform-style`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。
{{EmbedInteractiveExample("pages/css/transform-style.html")}}
平面化した場合、子要素は自身の 3D 空間に存在しなくなります。
このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。
## 構文
```css
/* キーワード値 */
transform-style: flat;
transform-style: preserve-3d;
/* グローバル値 */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: unset;
```
### 値
- `flat`
- : 要素の子要素を要素自身の平面上に配置することを示します。
- `preserve-3d`
- : 要素の子要素を 3D 空間に配置することを示します。
## 公式定義
{{CSSInfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Transform_style_demonstration">座標変換スタイルのデモ</h3>
この例では、座標変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で `transform-style: preserve-3d` が設定されているため、3D 空間で座標変換され、意図したとおりに表示されます。
また、これと `transform-style: flat` の間で切り替えられるチェックボックスも用意しました。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。
#### HTML
```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
```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: #fff;
}
.front {
background: rgba(90,90,90,.7);
transform: translateZ(50px);
}
.back {
background: rgba(0,210,0,.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(210,0,0,.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0,0,210,.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(210,210,0,.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(210,0,210,.7);
transform: rotateX(-90deg) translateZ(50px);
}
```
#### JavaScript
```js
const cube = document.getElementById('example-element');
const checkbox = document.getElementById('preserve');
checkbox.addEventListener('change', () => {
if(checkbox.checked) {
cube.style.transformStyle = 'preserve-3d';
} else {
cube.style.transformStyle = 'flat';
}
})
```
#### 結果
{{EmbedLiveSample('Transform_style_demonstration', '100%', 260)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [CSS 座標変換の使用](/ja/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
|
