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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
---
title: transform-style
slug: Web/CSS/transform-style
tags:
- CSS
- CSS Property
- CSS Transforms
- Experimental
- Reference
- 'recipe:css-property'
translation_of: Web/CSS/transform-style
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>transform-style</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の子要素を 3D 空間に配置するのか、平面化して要素の平面に配置するのかを設定します。</span></p>
<div>{{EmbedInteractiveExample("pages/css/transform-style.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<p>平面化した場合、子要素は自身の 3D 空間に存在しなくなります。</p>
<p>このプロパティは継承されないため、葉要素以外のすべての子孫要素で設定する必要があります。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
transform-style: flat;
transform-style: preserve-3d;
/* グローバル値 */
transform-style: inherit;
transform-style: initial;
transform-style: unset;
</pre>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>flat</code></dt>
<dd>要素の子要素を要素自身の平面上に配置することを示します。</dd>
<dt><code>preserve-3d</code></dt>
<dd>要素の子要素を 3D 空間に配置することを示します。</dd>
</dl>
<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
<p>{{CSSInfo}}</p>
<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Transform_style_demonstration" name="Transform_style_demonstration">変換スタイルのデモ</h3>
<p>この例では、変換を使用して 3D の立方体を作成しています。立方体の面の親コンテナーには、既定で <code>transform-style: preserve-3d</code> が設定されているため、3D 空間で変換され、意図したとおりに表示されます。</p>
<p>また、これと <code>transform-style: flat</code> の間で切り替えられるチェックボックスも用意されています。この別な状態では、立方体の面はすべて親の平面上に平坦化され、使用しているブラウザーによっては全く表示されない場合があります。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><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></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">#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);
}</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js notranslate">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';
}
})</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample('Transform_style_demonstration', '100%', 260)}}</p>
<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('CSS Transforms 2', '#transform-style-property', 'transform-style')}}</td>
<td>{{Spec2('CSS Transforms 2')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.properties.transform-style")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/CSS/Using_CSS_transforms">CSS 変形の使用</a></li>
</ul>
|
