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
|
---
title: transform
slug: Web/CSS/transform
tags:
- CSS
- CSS Property
- Transforms
translation_of: Web/CSS/transform
---
<div>{{CSSRef}}</div>
<div>CSS<strong><code>transform</code></strong>属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。</div>
<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>
<div class="warning">
<p>只能转换由盒模型定位的元素。根据经验，如果元素具有<code>display: block</code>，则由盒模型定位元素。</p>
</div>
<h2 id="语法">语法</h2>
<pre class="brush: css">/* Keyword values */
transform: none;
/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
/* Global values */
transform: inherit;
transform: initial;
transform: unset;
</pre>
<p><code>transform</code>属性可以指定为关键字值<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform$edit#none">none</a></code> 或一个或多个<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform$edit#%3Ctransform-function%3E"><transform-function></a></code>值。</p>
<h3 id="值">值</h3>
<dl>
<dt id="<transform-function>">{{cssxref("<transform-function>")}}</dt>
<dd>要应用的一个或多个CSS变换函数。 变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。</dd>
<dt id="none"><code>none</code></dt>
<dd>不应用任何变换。</dd>
</dl>
<h3 id="语法格式">语法格式</h3>
<pre>{{csssyntax}}
</pre>
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><code><div>Transformed element</div></code></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css"><code>div {
border: solid red;
transform: translate(30px, 20px) rotate(20deg);
width: 140px;
height: 60px;
}</code></pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample("示例", "400", "160")}}</p>
<p>有关更多示例，请参阅<a href="/zh-CN/docs/Web/CSS/CSS_Transitions">使用CSS变换</a>和{{cssxref("<transform-function>")}}。</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', '#transform-functions', 'transform')}}</td>
<td>{{Spec2('CSS Transforms 2')}}</td>
<td>Adds 3D transform functions.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
<td>{{Spec2('CSS3 Transforms')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<p>{{Compat("css.properties.transform")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transforms">Using CSS transforms</a></li>
<li>{{cssxref("<transform-function>")}} data type</li>
<li>A cross-browser 2D <a href="https://louisremi.github.io/jquery.transform.js/">transform plugin for jQuery</a></li>
</ul>
|
