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
|
---
title: matrix()
slug: Web/CSS/transform-function/matrix()
translation_of: Web/CSS/transform-function/matrix()
---
<div>{{CSSRef}}</div>
<p><strong><code>matrix()</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 {{cssxref("<transform-function>")}} 데이터 타입입니다.</p>
<div class="note">
<p><strong>주의:</strong> <code>matrix(a, b, c, d, tx, ty)</code> 는 <code><a href="/ko/docs/Web/CSS/transform-function/matrix3d">matrix3d</a>(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code> 를 짧게 쓴 것입니다.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<p><code>matrix()</code> 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.</p>
<div class="note"><strong>주의:</strong> 파이어폭스 16까지, Gecko(엔진) <code>tx</code>, <code>ty</code> 에{{cssxref("<length>")}} 값을 허용했습니다.</div>
<pre class="syntaxbox notranslate">matrix(<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>tx</em>, <em>ty</em>)
</pre>
<h3 id="Values">Values</h3>
<dl>
<dt><code>a</code> <code>b</code> <code>c</code> <code>d</code></dt>
<dd>{{cssxref("<number>")}}는 선형 변환(linear transformation)을 설명합니다.</dd>
<dt><code>tx</code> <code>ty</code></dt>
<dd>{{cssxref("<number>")}}는 적용 할 이동(translation)을 설명합니다.</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"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
<td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</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><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</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><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</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>[a b c d tx ty]</code></td>
</tr>
</tbody>
</table>
<h2 id="Examples">Examples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><div>Normal</div>
<div class="changed">Changed</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.changed {
transform: matrix(1, 2, -1, 1, 80, 80);
background-color: pink;
}</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample("Examples", 350, 350)}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>호환성 정보는 <code><a href="/ko/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>
<li><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li>
<li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li>
</ul>
|
