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: translate()
slug: Web/CSS/transform-function/translate()
tags:
- CSS
- CSS Function
- CSS Transforms
- Reference
translation_of: Web/CSS/transform-function/translate()
---
<div>{{CSSRef}}</div>
<p><strong><code>translate()</code></strong> 这个 <a href="/en-US/docs/Web/CSS">CSS</a> 函数在水平和/或垂直方向上重新定位元素。 其结果是 {{cssxref("<transform-function>")}} 类型。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p>
<p>该变换由二维向量构成。 它的坐标定义了元素在每个方向上移动了多少。</p>
<h2 id="语法">语法</h2>
<pre class="brush: css notranslate">/* Single <length-percentage> values */
transform: translate(200px);
transform: translate(50%);
/* Double <length-percentage> values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);
</pre>
<h3 id="值">值</h3>
<dl>
<dt>单个 <code><length-percentage></code> 作为参数</dt>
<dd>该值是 {{cssxref("<length>")}} 或者 {{cssxref("<percentage>")}} 代表翻译向量的横坐标 (horizontal, x-coordinate) . 而向量的纵坐标 (vertical, y-coordinate) 会被默认为 <code>0</code>. 例如, <code>translate(2)</code> 等价于 <code>translate(2, 0)</code> 。 里面还可以填百分比值，百分比值是指 {{cssxref("transform-box")}} 属性定义的参考框的宽度。</dd>
<dt>参数是两个 <code><length-percentage></code> 构成</dt>
<dd>此值描述两个 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 值，分别代表翻译的横坐标 (x-coordinate) 和纵坐标 (y-coordinate) 向量。 百分比作为第一个值表示宽度，第二个部分表示由 {{cssxref("transform-box")}} 属性定义的参考框的高度。</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="1" rowspan="2">
<p>平移不是 ℝ<sup>2</sup> 中的线性变换，因此不能使用矩阵来表示。</p>
</td>
<td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
<td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></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>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
</tr>
<tr>
<td><code>[1 0 0 1 tx ty]</code></td>
</tr>
</tbody>
</table>
<h3 id="形式语法">形式语法</h3>
<pre class="syntaxbox notranslate">translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}<a href="/en-US/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>)
</pre>
<h2 id="例子">例子</h2>
<h3 id="使用单个轴平移">使用单个轴平移</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 {
transform: translate(10px); /* Equal to: translateX(10px) or translate(10px, 0) */
background-color: pink;
}
</pre>
<h4 id="结果">结果</h4>
<p>{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}</p>
<h3 id="y轴和x轴都平移">y轴和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: translate(10px, 10px);
background-color: pink;
}
</pre>
<h4 id="结果_2">结果</h4>
<p>{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}</p>
<h2 id="规格">规格</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('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td>
<td>{{Spec2('CSS3 Transforms')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>请参阅 <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> 数据类型以获取兼容性信息。</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{cssxref("transform")}}</li>
<li>{{cssxref("<transform-function>")}}</li>
</ul>
|
