웹 개발/주요 태그, 속성들

css transform 속성

chan00 2021. 12. 18. 22:31

오늘은 html 요소의 위치를 이동시키거나 크기 조절, 회전시킬 수 있는 강력한 기능을 가진 transform이란

속성에 대해서 알아보도록 하겠습니다.

​

​

transform 속성은 4가지의 세부 속성으로 나눌 수 있습니다.

 

속성 설명
transform:scale() X축 또는 Y축으로 확대/축소시킵니다.
transform:rotate() 지정 요소를 회전시킵니다.
transform:translate() 지정요소를 X축, Y축으로 이동시킵니다.
transform:skew() 지정 요소를 X축 또는 Y축으로 기울입니다.

 

하나씩 예제 코드와 함께 살펴 보겠습니다.

​

​

1. transform:scale()

먼저 X축 또는 Y축으로 지정한 크기만큼 확대, 축소시키는 scale부터 알아보겠습니다.

 

/*기본 사용 방법*/
transform:scaleX(X축 배율); //X축으로 변화
transform:scaleY(Y축 배율); //Y축으로 변화
transform:scale(X축 배율, Y축 배율); //X축, Y축으로 변화

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>exhtml</title>
    <style type="text/css">
      div {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #CFFFE5;
        font-size: 20px;
        margin: 100px 100px 0 100px;
      }
      .transx:hover {
        transform:scaleX(1.5)
      }
      .transy:hover {
        transform:scaleY(1.5);
      }
      .trans:hover {
        transform:scale(1.5, 3);
      }
    </style>
  </head>
  <body>
    <div>
      div1
    </div>
    <div class="transx">
      div2
    </div>
    <div class="transy">
      div3
    </div>
    <div class="trans">
      div4
    </div>
  </body>
</html>

 

이렇게 4개의 div를 만들었고, 마우스를 div에 올렸을 때(hover) 각각 x축만, y축만, x,y축 둘 다 바뀌게

했습니다.

 

scaleX로 X축만 변경된 모습
scaleY로 Y축만 변경된 모습
scale로 X축, Y축 둘 다 변경된 모습

여기서는 하나 아셔야 하는 부분이, scale값으로 보면 px값이 아닌 1.5, 3 이런 숫자들을 썼습니다.

그리고 마우스를 올렸을 때 크기 변화를 보면, 값을 준 만큼 배율로 올라간다는 뜻이 됩니다.

그래서 보면 div2와 div3은 각각 X축, Y축으로 1.5배씩 늘어나고 div4는 X축으로는 1.5배,

Y축으로 3배가 올라간 것을 볼 수 있습니다.

​

​

2. transform:rotate()

이번에는 지정한 요소를 준 각도값만큼 회전시키는 rotate에 대해 알아 보겠습니다.

 

/*기본 사용 방법*/
transform:rotateX(X축 각도값);
transform:rotateY(Y축 각도값);
transform:rotate(X, Y축 각도값);

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>exhtml</title>
    <style type="text/css">
      div {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #CFFFE5;
        font-size: 20px;
        margin: 100px 100px 0 100px;
      }
      .transx:hover {
        transform:rotateX(50deg)
      }
      .transy:hover {
        transform:rotateY(50deg);
      }
      .trans:hover {
        transform:rotate(40deg);
      }
    </style>
  </head>
  <body>
    <div>
      div1
    </div>
    <div class="transx">
      div2
    </div>
    <div class="transy">
      div3
    </div>
    <div class="trans">
      div4
    </div>
  </body>
</html>

 

가로로 50도만큼 돌아간 모습
세로로 50도만큼 돌아간 모습
가로, 세로 40도씩 돌아간 모습

​

​

​

3. transform:translate()

지정 요소를 X나 Y축으로 이동시키는 translate를 알아보도록 하겠습니다.

 

/*기본 사용 방법*/
transform:translateX(X축 이동px값);
transform:translateY(Y축 이동px값);
transform:translate(X, Y축 이동px값);

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>exhtml</title>
    <style type="text/css">
      div {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #CFFFE5;
        font-size: 20px;
        margin: 100px 100px 0 100px;
      }
      .transx:hover {
        transform:translateX(40px);
      }
      .transy:hover {
        transform:translateY(-50px);
      }
      .trans:hover {
        transform:translate(60px, -50px);
      }
    </style>
  </head>
  <body>
    <div>
      div1
    </div>
    <div class="transx">
      div2
    </div>
    <div class="transy">
      div3
    </div>
    <div class="trans">
      div4
    </div>
  </body>
</html>

 

기본 상태를 기억하고, 각각 어떻게 움직이는지를 잘 살펴 보세요.
X축으로 40px(양수니까 오른쪽으로) 이동했습니다.
Y축으로 -50px(음수니까 위쪽으로) 이동했습니다.
X축 60px(오른쪽), Y축 -50px(위쪽)으로 이동했습니다.

이 부분에서는 참고로 알아둬야 할 것은 X축에서는 양수면 오른쪽, 음수면 왼쪽으로 이동하고

Y축에서는 양수면 위쪽, 음수면 아래쪽으로 이동합니다.

​

​

4. transform:skew()

이 속성은 주어진 값(각도값)만큼 지정된 요소를 기울입니다.

 

/*기본 사용 방법*/
transform:skewX(X축 각도값);
transform:skewY(Y축 각도값);
transform:skew(X축 각도값, Y축 각도값);

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>exhtml</title>
    <style type="text/css">
      div {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: #CFFFE5;
        font-size: 20px;
        margin: 100px 100px 0 100px;
      }
      .transx:hover {
        transform:skewX(40deg);
      }
      .transy:hover {
        transform:skewY(50deg);
      }
      .trans:hover {
        transform:skew(30deg, 30deg);
      }
    </style>
  </head>
  <body>
    <div>
      div1
    </div>
    <div class="transx">
      div2
    </div>
    <div class="transy">
      div3
    </div>
    <div class="trans">
      div4
    </div>
  </body>
</html>

 

각각 X축과 Y축, XY축에 기울기값을 주고 마우스를 올렸을 때의 변화 상태입니다.

​

​

​

​

​

오늘은 이렇게 transform을 다양하게 활용하는 방법에 대해 알아봤습니다.

transform을 이용하면 페이지에 다양한 효과를 넣을 수 있기에 이 속성도 잘 기억하셨으면

좋겠습니다.

저작자표시 (새창열림)