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
|
---
title: translate3d()
slug: Web/CSS/transform-function/translate3d()
tags:
- CSS
- CSS Function
- CSS Transforms
- Function
- Reference
translation_of: Web/CSS/transform-function/translate3d()
---
<div>{{CSSRef}}</div>
<p><strong><code>translate3d()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/CSS_Functions">関数</a>で、要素を 3D 空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。</p>
<div>{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<p>この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">translate3d(<var>tx</var>, <var>ty</var>, <var>tz</var>)
</pre>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code><var>tx</var></code></dt>
<dd>変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。</dd>
<dt><code><var>ty</var></code></dt>
<dd>変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。</dd>
<dt><code><var>tz</var></code></dt>
<dd>変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む変換は無効とされます。</dd>
</dl>
<table class="standard-table">
<thead>
<tr>
<th scope="col">ℝ<sup>2</sup> のデカルト座標</th>
<th scope="col">ℝℙ<sup>2</sup> の同次座標</th>
<th scope="col">ℝ<sup>3</sup> のデカルト座標</th>
<th scope="col">ℝℙ<sup>3</sup> の同次座標</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">
<p>ℝ<sup>2</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</p>
</td>
<td colspan="1" rowspan="2">ℝ<sup>3</sup> では線形変換ではないので、デカルト座標の行列で表すことはできない。</td>
<td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>tz</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
</tr>
</tbody>
</table>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Using_a_single_axis_translation" name="Using_a_single_axis_translation">単一軸を使用した変換</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div>Static</div>
<div class="moved">Moved</div>
<div>Static</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
/* Equivalent to perspective(500px) translateX(10px) */
transform: perspective(500px) translate3d(10px, 0, 0px);
background-color: pink;
}
</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}</p>
<h3 id="Combining_z-axis_and_x-axis_translation" name="Combining_z-axis_and_x-axis_translation">z 軸と x 軸を組み合わせた変換</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><div>Static</div>
<div class="moved">Moved</div>
<div>Static</div></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate">div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translate3d(10px, 0, 100px);
background-color: pink;
}
</pre>
<h4 id="Result_2" name="Result_2">結果</h4>
<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}</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", "#funcdef-translate3d", "translate3d()")}}</td>
<td>{{Spec2("CSS Transforms 2")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p><code><a href="/ja/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> データ型の互換性情報をご覧ください。</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{cssxref("transform")}}</li>
<li>{{cssxref("<transform-function>")}}</li>
</ul>
|
