Transform - rotate(), scale(), translate(), skew()

이전 포스팅에서 Transition에 대해서 정리를 했습니다. 트랜지션과 더불어 짝궁처럼 따라 다니는 속성이 바로 Transform이 아닐까 싶습니다. 트랜지션이 '변화'에 대한 영역을 제어한다면, 트랜스폼은 '변형'에 대한 영역을 컨트롤 하게 됩니다. 영화 <트랜스포머>의 변신하는 모습을 상상해보면 Transform 속성을 공부해보면 보다 이해가 쉬울 것입니다.

예제코드

아래와 같은 코드로 시작해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transform</title>
    <style>
      div {
        background-color: aliceblue;
        border: 2px solid gray;
        color: darkslategray;
        padding: 0.8em;
        margin: 20px;
        font-size: 1.5em;
        width: 300px;
        text-align: center;
      }
      div:nth-of-type(2n) {
        background-color: orange;
      }
      div:nth-of-type(3n) {
        background-color: skyblue;
      }
      div:nth-of-type(3n) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <section>
      <div>Transform !!</div>
      <div>Transform !!</div>
      <div>Transform !!</div>
      <div>Transform !!</div>
    </section>
    <section>
      <div>Transform !!</div>
      <div>Transform !!</div>
      <div>Transform !!</div>
      <div>Transform !!</div>
    </section>
  </body>
</html>

브라우저에서 확인을 해보면 다음과 같은 모습으로 나타납니다.

margin: 0 auto;

웹사이트를 구성하는 CSS 코드들을 살펴보다 보면, margin: 0 auto;라는 코드를 흔하게 만날 수 있습니다. 주로 "가운데 정렬"을 하기 위한 방법으로 사용되는데요, width 값을 가지는 <블록 레벨>인 엘리먼트들을 대상으로 합니다.

위 예제에서 모든 div 박스들을 브라우저 화면 가운데로 정렬을 하려면 어떻게 하면 좋을까요?

CSS를 살짝 변행해봅시다.

 div {
        background-color: aliceblue;
        border: 2px solid gray;
        color: darkslategray;
        padding: 0.8em;
        /* margin: 20px; */
        margin: 20px auto;
        font-size: 1.5em;
        width: 300px;
        text-align: center;
      }

아래 이미지처럼, 가운데 정렬이 쉽게 적용되었습니다.

margin 값에 auto를 부여하면 아주 간단하게 가운데 정렬이 된다는 사실을 잘 기억해두시면 좋습니다.

rotate() - 회전

Transform을 직관적으로 살펴보기 위해 rotate()를 이용해봅니다.

rotate에는 deg, grad, rad, turn 등의 단위를 사용할 수 있는데요, 우리는 가장 간단한 deg(degree)를 사용해보도록 합니다.

CSS에 아래 코드를 추가해봅시다.

    div:nth-of-type(1) {
      transform: rotate(45deg);
    }

div 첫번째 타입을 45도 rotate(회전) 시킨다는 의미입니다.

rotate(괄호) 형태로 사용되는 모습을 보면, 마치 프로그래밍 언어의 "함수"를 사용하는 것과 유사해보입니다.

45도 각도로 회전이 적용된 모습을 확인할 수 있습니다.

2개의 section 모두에서 첫번째 타입의 div 박스가 회전한 상태인데, 만약 첫번째 섹션에서의 div만 회전하는 상태로 만드려면 CSS를 어떻게 수정하면 좋을까요?

아래와 같이 CSS를 변경해주면 됩니다.

      section:first-of-type div:nth-of-type(1) {
        transform: rotate(45deg);
      }

section:first-of-type 을 통해서 첫번째 section만 선택하게 되는 것입니다.

잘 해결이 되었죠?

transform-origin:

'트랜스폼 오리진'은 변형을 시키는 위치의 기준점을 지정해줄 수 있는 속성입니다.

default는 center 인데요. 아래와 같이 다양한 위치를 직접 지정해서 변형을 가할 수 있게 되는 것입니다.

      section:first-of-type div:nth-of-type(1) {
        transform: rotate(45deg);
        transform-origin: top left;
      }

top left를 기준점으로 해서 마치 압정을 꼽은 것 처럼 로테이트가 되었습니다.

top, center, bottom, left, right 등을 이용해서 다양하게 기준점을 잡을 수 있습니다.

rotateX(), rotateY(), rotateZ()

참고로, 앞에서 살펴본 rotate()는 2차원 평면을 기준으로 동작하지만, 3차원을 기준으로 할 때는 rotateX, Y, Z를 각각 사용할 수 있습니다. 속성 이름에서 알 수 있듯이 각각 X축, Y축, Z축을 기준으로 rotation이 일어나게 되는 것입니다.

이 속성들은 추후 3D를 다룰 때, 좀 더 자세하게 다뤄볼 수 있도록 하겠습니다.

scale()

스케일은 크기 배율을 조정할 수 있도록 해줍니다. 두번째 div 박스의 크기를 0.8배 정도로 축소를 해보겠습니다.

아래 코드를 CSS에 추가해줍니다.

      section:first-of-type div:nth-of-type(2) {
        transform: scale(0.8);
      }

간단하죠? 값을 조정해서 2번째 div를 2배 크기로 직접 크게 만들어보시기 바랍니다.

한편 scale()은 scaleX(), scaleY()의 값을 각각 지정하여 사용할 수도 있습니다.

transform: scale(0.8, 2);  //가로는 0.8배, 세로는 2배

가로축으로는 0.8배를 했고, 세로축으로는 2배 크기로 스케일을 주었습니다.

translate()

translate()은 엘리먼트를 지정된 만큼 움직여 이동시킬 수 있는 속성입니다. move의 개념을 생각하면 됩니다.

CSS에 아래와 같은 코드를 추가해서, 3번째 div 박스를 우측으로 200px 이동 시켜보겠습니다.

      section:first-of-type div:nth-of-type(3) {
        transform: translateX(200px);
      }

간단하죠?

한편 translate() 또한 translateX(), translateY(), translateZ()를 사용함으로써 X축, Y축, Z축 방향으로 값을 지정해줄 수 있다는 것도 알아두시면 좋습니다.

그리고, 앞선 scale() 에서 살펴본 것처럼, X축 값과 Y축 값, 2개의 값을 한꺼번에 지정해서 사용할 수 있습니다.

      section:first-of-type div:nth-of-type(4) {
        transform: translate(-100px, 50px);
      }

skew()

skew는 삐뚫어지게 변형하는 속성입니다. 말로 설명하는 것보다, 눈으로 직접 한번 확인해보도록 합시다.

CSS에 아래 코드를 추가해봅니다.

      section:nth-of-type(2) div:nth-of-type(1) {
        transform: skew(200deg);
      }
      section:nth-of-type(2) div:nth-of-type(2) {
        transform: skew(200deg, 5deg);
      }

이상으로 transform 속성에 사용할 수 있는 개별적인 변형요소들을 살펴보았습니다.

한번에 여러 가지 변형을 적용하기

그런데 한번에 한 가지 변경요소들만 적용할 수 있는 것일까요? 아닙니다! 원하는 대로 여러가지 변형 요소들을 다양하게 조합해서 적용할 수 있다는 사실, 재미있을 것 같지 않나요?

      section:nth-of-type(2) div:nth-of-type(3) {
        transform: rotate(10deg) scale(2);
      }

마치며

transform 속성을 이용하여, 엘리먼트들에 변형을 주는 과정을 살펴보았습니다.

HTML에서 section을 이용해서 그루핑을 해두었는데요, 이 section을 선택자로 잡아서 transform을 주는 경우, 하위의 엘리먼트들에 대해서 한꺼번에 transform 속성을 적용할 수도 있게 됩니다.

transition과 더불어 transform도 웹 페이지를 인터렉티브 하고 다이나믹 하게 구성하는 데 매우 큰 역할을 해줍니다.

모션에 대한 창의력과 상상력을 발휘한다면, 훨씬 더 멋진 웹 사이트를 만드는 일이 조금 더 수월해질 수 있지 않을까 생각을 해봅니다.

오늘도 즐거운 코딩생활, 즐코딩.

KINcoding.

저작자표시 비영리 변경금지

'HTML+CSS' 카테고리의 다른 글

background 다채로운 기능 한 눈에 살펴보기 (0)	2023.04.05
Hover 버튼을 폼 나게 만들기 (transition + transform 적용) (0)	2023.04.03
Interactive의 시작, transition 속성 2/2 - timing function (0)	2023.03.24
Interactive의 시작, transition 속성 1/2 - duration, delay (0)	2023.03.23
Position 속성 정리(static, relative, absolute, fixed, sticky 비교) (0)	2023.03.21

즐코딩 - KINcoding

Transform - rotate(), scale(), translate(), skew()