From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/transform-function/index.html | 158 +++++++++++++++++++++ .../web/css/transform-function/matrix()/index.html | 89 ++++++++++++ .../web/css/transform-function/scalex()/index.html | 101 +++++++++++++ 3 files changed, 348 insertions(+) create mode 100644 files/ko/web/css/transform-function/index.html create mode 100644 files/ko/web/css/transform-function/matrix()/index.html create mode 100644 files/ko/web/css/transform-function/scalex()/index.html (limited to 'files/ko/web/css/transform-function') diff --git a/files/ko/web/css/transform-function/index.html b/files/ko/web/css/transform-function/index.html new file mode 100644 index 0000000000..3c17fbba85 --- /dev/null +++ b/files/ko/web/css/transform-function/index.html @@ -0,0 +1,158 @@ +--- +title: +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Layout + - Reference +translation_of: Web/CSS/transform-function +--- +
{{CSSRef}}
+ +

CSS <transform-function> 자료형은 요소의 외형에 영향을 주는 변형을 나타냅니다. 변형 함수는 2D 또는 3D 공간 내에서 요소를 회전하고, 크기를 바꾸고, 왜곡하고, 이동할 수 있습니다. {{cssxref("transform")}} 속성에서 사용합니다.

+ +

변형을 수학적으로 표현하기

+ +

HTML요소의 크기와 형태, 그리고 요소에 가해진 변형을 표현할 땐 다양한 좌표계를 사용할 수 있습니다. 가장 흔히 사용하는건 직교좌표계이나, 가끔 동차좌표계도 쓰입니다.

+ +

직교좌표

+ +

직교좌표계 평면 위의 점은 X 좌표(가로 좌표)와 Y 좌표(세로 좌표)를 사용해 표현하며, 벡터 표현 (x, y)를 사용해 나타냅니다.

+ +

CSS (및 다른 대부분의 컴퓨터 그래픽)에서, 원점 (0, 0)은 요소의 좌상단 꼭짓점을 가리킵니다. 양의 좌표는 원점의 오른쪽과 아래로 진행하고, 음의 좌표는 왼쪽과 위로 진행합니다. 따라서 오른쪽으로 2단위, 아래쪽으로 5단위에 위치한 점은 (2, 5)이고 왼쪽으로 3단위, 위쪽으로 12단위 나아간 점은 (-3, -12)입니다.

+ +

변형 함수

+ +

Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:

+ +

ac bd

+ +

The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

+ +

ac bd xy = ax+cy bx+dy

+ +

It is even possible to apply several transformations in a row:

+ +

a1 c1 b1 d1 a2 c2 b2 d2 = a1 a2 + c1 b2 a1 c2 + c1 d2 b1 a2 + d1 b2 b1 c2 + d1 d2

+ +

With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

+ +

However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two additional parameters.

+ +
+

참고: Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3×3 transformation matrices, and can simply express translations as linear functions.

+
+ +

구문

+ +

The <transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.

+ +

행렬 변형

+ +
+
matrix()
+
Describes a homogeneous 2D transformation matrix.
+
matrix3d()
+
Describes a 3D transformation as a 4×4 homogeneous matrix.
+
+ +

원근

+ +
+
perspective()
+
Sets the distance between the user and the z=0 plane.
+
+ +

회전

+ +
+
rotate()
+
Rotates an element around a fixed point on the 2D plane.
+
rotate3d()
+
Rotates an element around a fixed axis in 3D space.
+
rotateX()
+
Rotates an element around the horizontal axis.
+
rotateY()
+
Rotates an element around the vertical axis.
+
rotateZ()
+
Rotates an element around the z-axis.
+
+ +

크기 조절

+ +
+
scale()
+
Scales an element up or down on the 2D plane.
+
scale3d()
+
Scales an element up or down in 3D space.
+
scaleX()
+
Scales an element up or down horizontally.
+
scaleY()
+
Scales an element up or down vertically.
+
scaleZ()
+
Scales an element up or down along the z-axis.
+
+ +

기울이기 (왜곡)

+ +
+
skew()
+
Skews an element on the 2D plane.
+
skewX()
+
Skews an element in the horizontal direction.
+
skewY()
+
Skews an element in the vertical direction.
+
+ +

이동

+ +
+
translate()
+
Translates an element on the 2D plane.
+
translate3d()
+
Translates an element in 3D space.
+
translateX()
+
Translates an element horizontally.
+
translateY()
+
Translates an element vertically.
+
translateZ()
+
Translates an element along the z-axis.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#transform-functions', '<transform-function>')}}{{Spec2('CSS Transforms 2')}}Added 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-functions', '<transform-function>')}}{{Spec2('CSS3 Transforms')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.transform-function")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/transform-function/matrix()/index.html b/files/ko/web/css/transform-function/matrix()/index.html new file mode 100644 index 0000000000..cf9940c92a --- /dev/null +++ b/files/ko/web/css/transform-function/matrix()/index.html @@ -0,0 +1,89 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix() +translation_of: Web/CSS/transform-function/matrix() +--- +
{{CSSRef}}
+ +

matrix() CSS 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 {{cssxref("<transform-function>")}} 데이터 타입입니다.

+ +
+

주의: matrix(a, b, c, d, tx, ty) 는 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 를 짧게 쓴 것입니다.

+
+ +

Syntax

+ +

matrix() 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.

+ +
주의: 파이어폭스 16까지, Gecko(엔진) tx, ty 에{{cssxref("<length>")}} 값을 허용했습니다.
+ +
matrix(a, b, c, d, tx, ty)
+
+ +

Values

+ +
+
a b c d
+
{{cssxref("<number>")}}는 선형 변환(linear transformation)을 설명합니다.
+
tx ty
+
{{cssxref("<number>")}}는 적용 할 이동(translation)을 설명합니다.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]
+ +

Examples

+ +

HTML

+ +
<div>Normal</div>
+<div class="changed">Changed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}
+ +

Result

+ +

{{EmbedLiveSample("Examples", 350, 350)}}

+ +

Browser compatibility

+ +

호환성 정보는 <transform-function> 데이터 타입을 확인하세요.

+ +

See also

+ + diff --git a/files/ko/web/css/transform-function/scalex()/index.html b/files/ko/web/css/transform-function/scalex()/index.html new file mode 100644 index 0000000000..7ef38655fe --- /dev/null +++ b/files/ko/web/css/transform-function/scalex()/index.html @@ -0,0 +1,101 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX() +translation_of: Web/CSS/transform-function/scaleX() +--- +
{{CSSRef}}
+ +

CSS 함수인 scaleX() x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는  {{cssxref("<transform-function>")}}  데이터 타입 입니다.

+ +

+ +

스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.scaleX(-1) 은 원점을 지나는 수직축이 있는 대칭축을 의미합니다  ( {{cssxref("transform-origin")}} 속성의해 지정되어집니다).

+ +
+

Note: scaleX(sx) 는 scale(sx, 1) 또는  scale3d(sx, 1, 1) 와 같습니다.

+
+ +

Syntax

+ +
scaleX(s)
+
+ +

Values

+ +
+
s
+
요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 {{cssxref("<number>")}} 입니다.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
s0 01 s00010001 s00010001 s000010000100001
[s 0 0 1 0 0]
+ +

Examples

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scaleX(0.6);
+  background-color: pink;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Examples","200","200")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf