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
|
---
title: translate3d()
slug: Web/CSS/transform-function/translate3d
tags:
- CSS
- CSS 函数
- CSS 变换
- 参考
translation_of: Web/CSS/transform-function/translate3d()
original_slug: Web/CSS/transform-function/translate3d()
---
<div>{{CSSRef}}</div>
<p><code>translate3d()</code> CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox notranslate">translate3d(tx, ty, tz)</pre>
<dl>
<dt>
<h2 id="常量">常量</h2>
</dt>
<dt><em>tx</em></dt>
<dd>是一个 {{cssxref("<length>")}} 代表移动向量的横坐标。</dd>
<dt><em>ty</em></dt>
<dd>是一个{{cssxref("<length>")}} 代表移动向量的纵坐标。</dd>
<dt><em>tz</em></dt>
<dd>是一个 {{cssxref("<length>")}} 代表移动向量的z坐标。它不能是{{cssxref("<percentage>")}} 值；那样的移动是没有意义的。</dd>
</dl>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
<th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
<th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
<th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" rowspan="2">
<p> 此变换适用于3D空间，并不适用于这两种情况。</p>
</td>
<td colspan="1" rowspan="2">
<p>平移不是ℝ<sup>3</sup>中的线性变换，不能使用笛卡尔坐标矩阵表示。</p>
</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="示例">示例</h2>
<h3 id="单轴变化示例">单轴变化示例</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><p>foo</p>
<p class="transformed">bar</p>
<p>foo</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed {
transform: perspective(500px) translate3d(10px,0px,0px);
/* equivalent to perspective(500px) translateX(10px)*/
background-color: blue;
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample("Using_a_single_axis_translation","100%","250")}}</p>
<h3 id="z轴与x轴变化">z轴与x轴变化</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><p>foo</p>
<p class="transformed">bar</p>
<p>foo</p></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate">p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed {
transform: perspective(500px) translate3d(10px,0px,100px);
background-color: blue;
}</pre>
<h3 id="结果_2">结果</h3>
<p>{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation","100%","250")}}</p>
<p> </p>
<h2 id="规格">规格</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}</td>
<td>{{Spec2("CSS Transforms 2")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>有关兼容性信息，请参阅<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a>的兼容性信息。</p>
<h2 id="另请参阅">另请参阅</h2>
<ul>
<li>{{cssxref("transform")}}</li>
<li>{{cssxref("<transform-function>")}}</li>
</ul>
<p> </p>
|
