blob: 117a42ed4fe7062816eb67054100eafc30e79ee3 (
plain)
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
|
---
title: translate
slug: Web/CSS/translate
tags:
- CSS
- CSS属性
- Transforms
- 参考
- 实验性
- 平移
translation_of: Web/CSS/translate
---
<div>{{CSSRef}}</div>
<p><a href="/en-US/docs/Web/CSS">CSS</a> 属性 <strong><code>translate</code></strong> 允许你单独声明平移变换，并独立于 {{cssxref("transform")}} 属性。这在一些典型的用户界面上更好用，而且这样就无需在 <code>transform</code> 中声明该函数并记住转换函数的确切顺序了。</p>
<h2 id="语法">语法</h2>
<pre class="brush: css no-line-numbers notranslate">/* Keyword values */
translate: none;
/* Single values */
translate: 100px;
translate: 50%;
/* Two values */
translate: 100px 200px;
translate: 50% 105px;
/* Three values */
translate: 50% 105px 5rem;
</pre>
<h3 id="值">值</h3>
<dl>
<dt>单个长度/百分比值</dt>
<dd>一个长度值或百分比，表示二维平移，与声明了 X 轴和 Y 轴的平移一样（此时省略的第二个值默认为0）。等同于在 <code>translate()</code> 函数（2D 平移）中指定单个值。</dd>
<dt>两个长度/百分比值</dt>
<dd>两个长度值或百分比表示在二维上分别按照指定X轴和Y轴的值进行的平移。等同于在 <code>translate()</code> 函数（2D 平移）中函数指定两个值。</dd>
<dt>三个长度/百分比值</dt>
<dd>三个长度值或百分比，表示分别指定 X 轴、Y 轴、Z 轴的值进行三维平移。等同于<code>translate3d()</code> 函数（3D 平移）。</dd>
<dt id="none"><code>none</code></dt>
<dd>表示不应用平移效果。</dd>
</dl>
<h3 id="形式语法">形式语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div>
<p class="translate">Translation</p>
</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
div {
width: 150px;
margin: 0 auto;
}
p {
padding: 10px 5px;
border: 3px solid black;
border-radius: 20px;
width: 150px;
font-size: 1.2rem;
text-align: center;
}
.translate {
transition: translate 1s;
}
div:hover .translate {
translate: 200px 50px;
}
</pre>
<h3 id="结果">结果</h3>
<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/CSS/translate$samples/Examples?revision=1595410"></iframe></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('CSS Transforms 2', '#individual-transforms', 'individual transforms')}}</td>
<td>{{Spec2('CSS Transforms 2')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>{{CSSInfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.translate")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{cssxref('scale')}}</li>
<li>{{cssxref('rotate')}}</li>
<li>{{cssxref('transform')}}</li>
</ul>
<p>注意：skew 不是一个独立的变换属性。</p>
|
