files/zh-tw/web/css/transform/index.html


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
153
154
155
156
157
158
159

---
title: transform
slug: Web/CSS/transform
tags:
  - CSS
  - CSS Property
  - NeedsBrowserCompatibility
  - Reference
  - Transforms
translation_of: Web/CSS/transform
---
<div>{{CSSRef}}</div>

<p><strong><code>transform</code></strong> <a href="/zh-TW/docs/Web/CSS">CSS</a> 屬性可以讓你修改 CSS 可視化格式模型（visual formatting model）的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。</p>

<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>

<p>如果這個屬性的值不是 <code>none</code>，將會建立一個 <a href="/zh-TW/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">stacking context</a>。在這個情況下，此元素將被其所包含的 <code>position: fixed</code> 元素當成一個 containing block。</p>

<div class="warning">
<p>只有可以變形的元素可以被變形，這包括所有被CSS box model掌管輸出的元素，除了<a href="/en-US/docs/Web/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">視覺格式化模型, </a><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/col">table-column boxes</a> 和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup">table-colunm-group boxes</a>。</p>
</div>

<h2 id="語法">語法</h2>

<pre class="notranslate">/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;</pre>

<p><code>transform</code> 屬性可能被指定為關鍵字值 <code><a href="#none">none</a></code> 或著一或多個 <code><a href="#&lt;transform-function>">&lt;transform-function&gt;</a></code> 值。</p>

<h3 id="值">值</h3>

<dl>
 <dt id="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</dt>
 <dd>可使用一個或多個 <a href="/zh-TW/docs/Web/CSS/transform-function">CSS transform functions</a>。複合的transforms 會由左至右的順序來套用。</dd>
 <dt id="none"><code>none</code></dt>
 <dd>設定為沒有套用任何 transform。</dd>
</dl>

<h2 id="可使用性問題">可使用性問題</h2>

<p>改變尺寸和伸縮的動畫會影響網頁普遍的可使用性，因為它們可能促發一些頭痛的問題。如果你想要在網頁中提供這樣的功能，最好在網頁中放上給使用者關閉這些功能的控制開關。</p>

<p>另外也可考慮使用{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} 這個媒體功能來寫一個在系統設定端的<a href="/en-US/docs/Web/CSS/Media_Queries">媒體詢問</a>，讓使用者在減少了動畫偏好之後可以關閉該使用者網頁的動畫功能。</p>

<p>瞭解更多:</p>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.3_%E2%80%94_Seizures_and_Physical_Reactions_Do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions">MDN Understanding WCAG, Guideline 2.3 explanations</a></li>
 <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions">Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1</a></li>
</ul>

<h2 id="正式定義">正式定義</h2>

<p>{{CSSInfo}}</p>

<h2 id="標準語法">標準語法</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="範例">範例</h2>

<h3 id="平移、旋轉元素">平移、旋轉元素</h3>


<h3 id="HTML">HTML</h3>


<pre class="brush: html notranslate">&lt;p&gt;Transformed element&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">p {
  border: solid red;
  transform: translate(100px) rotate(20deg);
  transform-origin: 0 -250px;
}</pre>

<h3 id="結果">結果</h3>

<p>{{EmbedLiveSample("Translating_and_rotating_an_element", "400", "160")}}</p>

<h3 id="更多範例">更多範例</h3>

<p>請參考<a href="/zh-TW/docs/Web/Guide/CSS/Using_CSS_transforms">使用 CSS transforms</a> 以及 {{cssxref("&lt;transform-function&gt;")}} 的更多範例。</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>


<p>{{Compat("css.properties.transform")}}</p>

<h2 id="參見">參見</h2>

<ul>
 <li><a href="/zh-TW/docs/CSS/Using_CSS_transforms">使用 CSS transforms</a></li>
 <li>{{cssxref("&lt;transform-function&gt;")}} data type</li>
 <li>A cross-browser 2D <a href="https://louisremi.github.io/jquery.transform.js/">transform plugin for jQuery</a></li>
</ul>