본문 바로가기
HTML

[HTML, CSS] transform, transition으로 요소 이동 및 변형시키는 방법

by gtbowurrs 2019. 8. 11.

CSS의 transform과 transition을 사용하여 html 요소를 이동 및 변형시키는 방법에 대해 살펴보겠습니다.

transform 속성을 사용하여 효과를 주고

transition 속성으로 효과를 제어합니다.

 

 

예제를 통해서 살펴보겠습니다.

 

다음과 같이 div가 하나 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 500px;
        height: 500px;
        background: #55efc4;
      }
    </style>
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

 

div

 

 

onclick 이벤트 핸들러를 사용하여 div를 클릭하면 transform 속성이 추가되도록 준비했습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 500px;
        height: 500px;
        background: #55efc4;
      }
      .go {
        transform: /* 속성 추가할 부분 */
      }
    </style>
  </head>
  <body>
    <div class="container" onclick="move()"></div>
    <script>
      function move() {
        document.querySelector(".container").classList.add("go");
      }
    </script>
  </body>
</html>

div를 클릭하면 go클래스 내부에 transform 속성이 적용됩니다.

 

이제 transform으로 값을 설정해보겠습니다.

 

transform

translate()

translate( x축 거리, y축 거리 )

x축 거리와 y축 거리만큼 요소를 이동시킵니다.

 

.go {
  transform: translate(300px, 300px);
}

x축으로 300px, y축으로 300px 이동시킵니다.

 

 

translate(300px, 300px)

 

 

em이나 %단위로도 사용할 수 있습니다.

이 때 %는 해당 요소의 길이를 기준으로 계산합니다.

.go {
  transform: translate(50%, 3em);
}

x축으로 요소의 width의 절반만큼, y축으로 3em 이동시킵니다.

 

 

translate(50%, 3em)

 

 

x축이나 y축 한쪽만 이동하고 싶을 땐 translateX와 translateY를 사용합니다.

translateX( x축 거리 )

translateY( y축 거리 )

 

 

scale()

scale( 가로길이에 곱하는 수, 세로길이에 곱하는 수 )

요소의 가로길이와 세로길이를 변경시킵니다.

인자로 곱하는 수를 전달합니다.

 

.go {
  transform: scale(0.5, 2);
}

가로길이를 절반으로, 세로길이를 두배로 합니다.

 

 

scale(0.5, 2)

 

 

역시 한쪽만 변경하기 위해서는 scaleX와 scaleY를 사용합니다.

scaleX( 가로길이에 곱하는 수 )

scaleY( 세로길이에 곱하는 수 )

 

 

rotate()

rotate( 각도 )

요소를 주어진 각도만큼 시계방향으로 회전합니다.

 

.go {
  transform: rotate(30deg);
}

시계방향으로 30도 회전합니다.

 

 

rotate(30deg)

 

 

transition

transform만으로는 요소의 변형을 일으킬 뿐 움직이는 동적인 효과를 줄 수 없습니다.

transition을 사용하여 동적인 효과를 줍니다.

 

transition-property - 동적인 효과를 적용할 프로퍼티를 지정합니다.(가로길이, 세로길이 등)

transition-duration - 동적인 효과가 진행되는 시간을 지정합니다.

transition-timing-function - 효과의 진행속도를 조절합니다.(점점 빠르게, 점점 느리게 등)

transition-delay - transition 요청을 받은 후 실제 실행할 때까지 지연시간을 설정합니다.

 

4개의 속성을 한번에 지정할 수도 있습니다.

transition: transition-property, transition-duration, transition-timing-function, transition-delay )

 

 

.go {
  transform: translate(300px, 300px);
  transition-property: all;
  transition-duration: 2s;
  transition-delay: 1s;
}

요청을 받고 1초 후에 모든 변화를 2초동안 진행합니다.

 

 

 

 

여러가지 효과를 동시에 줄 수도 있습니다.

.go {
  background: #d63031;
  border-radius: 80px;
  transform: translate(300px, 300px) rotate(180deg);
  transition-property: all;
  transition-duration: 2s;
  transition-delay: 1s;
}

 

반응형

댓글0