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
|
---
title: transform
slug: Web/CSS/transform
tags:
- CSS
- CSS プロパティ
- CSS 変形
- Reference
translation_of: Web/CSS/transform
---
<div>{{CSSRef}}</div>
<div><a href="/ja/docs/Web/CSS">CSS</a> のプロパティ <strong><code>transform</code></strong> は、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の<a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a>の座標空間を変更します。</div>
<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<p>このプロパティに <code>none</code> 以外の値が設定されていると、<a href="/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">重ね合わせコンテキスト</a> が作成されます。この場合、その要素はその中に含まれる <code>position: fixed;</code> または <code>position: absolute;</code> である要素すべての<a href="/ja/docs/Web/CSS/Containing_block">包含ブロック</a>として扱われます。</p>
<div class="warning">
<p>変形可能な要素のみが <code>transform</code> の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、<a href="/ja/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">非置換インラインボックス</a>、<a href="/ja/docs/Web/HTML/Element/col">表の列ボックス</a>、<a href="/en-US/docs/Web/HTML/Element/colgroup">表の列グループボックス</a>を除くすべての要素です。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush: css">/* キーワード値 */
transform: none;
/* 関数値 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* 複数の関数値 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);
/* グローバル値 */
transform: inherit;
transform: initial;
transform: unset;
</pre>
<p><code>transform</code> プロパティには、キーワード値 <code><a href="#none">none</a></code> か <code><a href="#<transform-function>"><transform-function></a></code> の値のいずれかが指定されます。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt id="<transform-function>">{{cssxref("<transform-function>")}}</dt>
<dd>適用される 1 つ以上の <a href="/ja/docs/Web/CSS/transform-function">CSS 変形関数</a>です。変形関数は、左から右へ順に重ねられ、つまり右から左の順に変形の混合の効果が適用されます。</dd>
<dt id="none"><code>none</code></dt>
<dd>変形を何も適用しないことを指定します。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<p>{{cssxref("transform-function/perspective", "perspective()")}} を複数の関数の中で使用する場合は、最初に配置しなければなりません。</p>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div>Transformed element</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample("Examples", "400", "160")}}</p>
<p>その他の例は、<a href="/ja/docs/Web/Guide/CSS/Using_CSS_transforms">CSS Transforms の利用</a> および {{cssxref("<transform-function>")}} をご覧ください。</p>
<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
<p>拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。</p>
<p>また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。</p>
<p>詳しくは以下の文書を参照してください。</p>
<ul>
<li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN WCAG の理解、ガイドライン 2.3 の解説</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
</ul>
<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-functions', 'transform')}}</td>
<td>{{Spec2('CSS Transforms 2')}}</td>
<td>3D 変換関数を追加。</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
<td>{{Spec2('CSS3 Transforms')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<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")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/CSS/Using_CSS_transforms">CSS 変形の使用</a></li>
<li>{{cssxref("<transform-function>")}} データ型にすべての変形関数の説明があります</li>
<li>CSS 変形機能を視覚化するオンラインツール: <a href="https://css-transform.moro.es/">CSS Transform Playground</a></li>
</ul>
|
