06-Transform(변화)

1. transform-2d

transform은 HTML 요소에 스타일을 변형시키기 위해서 사용하는 속성입니다. 속성값으로는 함수 형태로 이루어진 translate(), scale(), skew(), rotate() 등을 사용할 수 있습니다.

함수	설명
`translate(x, y)`	요소를 현재 위치에서 x(x축)와 y(y축)만큼 이동합니다.
`translateX(n)`	요소를 현재 위치에서 n만큼 x축으로 이동합니다.
`translateY(n)`	요소를 현재 위치에서 n만큼 y축으로 이동합니다.
`scale(x, y)`	요소를 x(x축)와 y(y축)만큼 확대 또는 축소합니다.
`scaleX(n)`	요소를 n만큼 x축으로 확대 또는 축소합니다.
`scaleY(n)`	요소를 n만큼 y축으로 확대 또는 축소합니다.
`skew(xdeg, ydeg)`	요소를 x축과 y축으로 xdeg, ydeg(각도)만큼 기울입니다.
`skewX(deg)`	요소를 deg(각도)만큼 x축 방향으로 기울입니다.
`skewY(deg)`	요소를 주어진 deg(각도)만큼 y축 방향으로 기울입니다.
`rotate(deg)`	요소를 deg(각도)만큼 회전합니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>트랜스폼(Transform)</title>
8    <style>
9      .box {
10        width: 100px;
11        height: 100px;
12        background-color: red;
13        /* 📝 translate(x, y) : HTML 요소의 위치를 X축 또는 Y축 위치로 이동 */
14        /* translateZ() : Z축(3D)으로 이동, translateX(), translateY()  */
15        /* transform: translate(100px, 50px); */
16        /* 📝 scale(x축 배율, y축 배율) : HTML 요소의 x축 또는 y축 방향으로 확대, 기본값 1 */
17        /* transform: scale(2); */
18        /* 📝 skew(x축 각도, y축 각도) : HTML 요소의 x축 또는 y축 기준으로 지정된 각도만큼 비틀기 */
19        /* 속성값은 각도를 의미하는 deg를 사용, 30deg = 30도 */
20        /* transform: skew(30deg); */
21        /* 📝 rotate(회전각도deg) HTML 요소의 지정한 각도만큼 시계방향으로 회전 */
22        transform: rotate(30deg);
23      }
24    </style>
25  </head>
26  <body>
27    <div class="box"></div>
28  </body>
29</html>

1.1 transform-origin

앞에서 설명한 rotate() 함수는 작동 원리가 매우 간단합니다. 그런데 여기서 회전의 중심을 눈여겨봐야 합니다. 실행결과를 보면 요소가 회전할 때 요소의 중심을 기준으로 회전합니다. 이처럼 변형 관련 속성값들은 변형을 시작하는 기준점이 있습니다. 이 기준점은 항상 요소의 중심입니다. 그래서 기준점을 바꾸면 변형 효과가 다르게 적용됩니다. 변형 기준점은 transform-origin 속성으로 변경할 수 있습니다.

속성값에는 x축의 기준 위치와 y축의 기준 위치를 넣습니다. 위치는 % 단위나 정해진 키워드를 넣으면 되는데, 해당 속성에서 사용할 수 있는 키워드는 다음 표와 같습니다.

축	속성값	설명
x축	left	왼쪽을 기준점으로 잡습니다.
center	중앙을 기준점으로 잡습니다.
right	오른쪽을 기준점으로 잡습니다.
y축	top	위쪽을 기준점으로 잡습니다.
center	중앙을 기준점으로 잡습니다.
bottom	아래쪽을 기준점으로 잡습니다.

왼쪽 위 모서리를 기준으로 삼고 싶다면 다음과 같이 코드를 추가합니다.

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>rotate</title>
8    <style>
9      .container {
10        border: 1px solid black;
11        display: inline-block;
12        margin: 20px;
13      }
14      .box {
15        width: 100px;
16        height: 100px;
17        background-color: red;
18      }
19      .box:hover {
20        transform: rotate(30deg); /* 오른쪽으로 회전 */
21        transform-origin: top left; /* 왼쪽 위 모서리를 기준점으로 지정 */
22      }
23    </style>
24  </head>
25  <body>
26    <div class="container">
27      <div class="box"></div>
28    </div>
29  </body>
30</html>

코드를 실행하면 변경한 기준점에서 요소가 회전하는 것을 볼 수 있습니다.

2. transform-3d

transform에는 translateZ(), scaleZ() 등 같은 Z축을 기준으로 다루는 속성값이 있습니다. 이 값들은 HTML 요소가 3D 공간에 있을 떄, 그 변화가 느껴지는 속성값들입니다. 일반적으로 웹 브라우저는 X와 Y축의 좌표만 존재하는 2D 공간에 있기 떄문에 Z축에서 변형되는 것들은 직접 눈으로 확인하기가 어렵습니다.

그래서 이러한 값들을 확인하기 위해 HTML 요소를 3D 공간에 배치할 필요가 생기는데, 그러기 위해서 사용하는 CSS 속성이 perspective, transform-style 속성입니다.

perspective (원근감) : 부모 요소에 적용하면 원근감을 생기게 합니다.
- 하위 요소들의 transform 속성에 의한 변형이 원근감있게 관찰됨
transform-style : 하위 요소들을 3D 공간에 배치해서 다룰 수 있게 해줌

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>perspective, transform-style</title>
8    <style>
9      .parent {
10        width: 100px;
11        height: 100px;
12        border: 4px solid black;
13        background-color: #e9e9e9;
14        perspective: 1000px; /* 자식 요소를 바라볼 떄의 시야 거리(=관찰 거리) */
15      }
16      .box {
17        width: 100px;
18        height: 100px;
19        background-color: red;
20        margin: 0 auto;
21        /* translateZ 값이 크면 모니터와 가까워지고, 작으면 모니터와 멀어짐  */
22        transform: translateZ(300px);
23      }
24    </style>
25  </head>
26  <body>
27    <div class="parent">
28      <div class="box"></div>
29    </div>
30  </body>
31</html>

이해를 돕기 위해 예시 사이트로 가봅시다.

http://tridiv.com/app/

1<!doctype html>
2<html lang="ko">
3  <head>
4    <meta charset="UTF-8" />
5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <title>perspective, transform-style</title>
8    <style>
9      .parent {
10        width: 100px;
11        height: 100px;
12        border: 4px solid black;
13        background-color: #e9e9e9;
14        perspective: 1000px; /* 자식 요소를 바라볼 떄의 시야 거리(=관찰 거리) */
15        /* 크롬 개발자 도구로 rotateY를 조정해봅시다. */
16        transform: rotateY(0deg);
17        transform-style: preserve-3d;
18      }
19      .box {
20        width: 100px;
21        height: 100px;
22        background-color: red;
23        margin: 0 auto;
24        /* translateZ 값이 크면 모니터와 가까워지고, 작으면 모니터와 멀어짐  */
25        transform: translateZ(100px);
26      }
27    </style>
28  </head>
29  <body>
30    <div class="parent">
31      <div class="box"></div>
32    </div>
33  </body>
34</html>

이 CSS 강의는 2D의 웹페이지를 만들어내는 것을 목표로 삼기에 여기까지 배우지만 이후에 3D를 배울 떄, 이 장의 개념만 제대로 숙지한다면 큰 도움이 될 것입니다.

05-애니메이션 07-Flexbox 레이아웃