[CSS] New "transform" Syntax

운동하는 개발자·2023년 8월 14일

CSS

Overview

2022년 CSS를 새롭게 작성하는 방법이 많이 나왔다. 새로운 방법은 다양한 곳에 많이 작성되어 알 수 있었지만, 오늘 내가 말하고 싶은 내용은 아직 작성된 곳이 많이 없어 이렇게 직접 작성을 하게 되었다.

1.transform

CSS를 아는 사람이라면 반드시 알아야 되는 속성입니다.

transform 속성은 요소를 변형하거나 변환하는 데 사용되는 속성입니다.

1-1. transform 변환 함수

1-1-1. translate(x, y):

요소를 x축과 y축으로 이동시킵니다. 양수 값은 오른쪽 및 아래 방향으로 이동시키고, 음수 값은 왼쪽 및 위 방향으로 이동시킵니다.

1-1-2. rotate(angle):

요소를 주어진 각도만큼 회전시킵니다. 양수 값은 시계방향으로 회전하고, 음수 값은 반시계방향으로 회전합니다.

1-1-3. scale(x, y):

요소의 크기를 x축과 y축으로 조절합니다. 값이 1.0일 경우 원래 크기를 유지하며, 값이 작아지면 축소되고, 값이 커지면 확대됩니다.

1-1-4. skew(x-angle, y-angle):

요소를 x축과 y축 방향으로 기울입니다. 양수 값은 오른쪽 아래 방향으로 기울이고, 음수 값은 왼쪽 위 방향으로 기울입니다.

1-1-5. matrix(a, b, c, d, e, f):

2D 변환 매트릭스를 직접 지정할 수 있습니다. 각각의 매개변수는 변환 행렬의 요소를 나타냅니다.

2. Syntax

tranform을 사용 시 다양한 변환함수를 사용하는 경우, 아래와 같이 작성을 해야된다.

<style>
.my_test {
  transform: translate(50px, 50px) rotate(45deg) scale(1.5);
}
</style>

위의 코드를 보게되면, 하나의 transform에 다양한 변환함수를 적어서 한 줄로 사용하게 된다.

2-1. @keyframes을 이용하는 경우

다양한 변환 함수를 키프레임 애니메이션에 적용하는 예시를 확인해보면 아래와 같다.

<style>
.animated_box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: transformAnimation 4s infinite;
}

@keyframes transformAnimation {
  0% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateX(200px) rotate(90deg) scale(1.2);
  }
  50% {
    transform: translateX(400px) rotate(180deg) scale(0.8);
  }
  75% {
    transform: translateX(200px) rotate(270deg) scale(1.5);
  }
  100% {
    transform: translateX(0) rotate(360deg) scale(1);
  }
}
</style>

위의 코드와 같이 변형이되는 요소를 모두 작성을 해야만한다.
만약, translateX 변환함수가 고정이 되더라도, 우리는 transform의 속성을 모두 작성을 해줘야한다.

그렇지 않으면 아래의 링크와 같은 이슈가 발생할 수 있다.
오늘은 한번 개술가가 되보겠습니다. - planic324.log

3. New Syntax (2023.02)

2023년 2월에 MDN에 기재된 syntax로 아래와 같이 사용하면, 중복되는 변환함수를 사용하지 않을 뿐더러, transform이라는 속성을 사용하지 않아도 된다.

3-1. 예시

<style>
.test_box{
    translate: 50px 50px;
    scale: 0.8;
    rotate: 45deg;
}
</style>

해당 코드처럼 transform을 적지 않고, 바로 translate, scale, rotate속성을 그대로 사용하는 것이다.

다른 skew, matrix는 아직 사용할 수 없는 단점이 있다.

테스트 화면 확인하기

3-2. 단일 축만 변경하는 경우

만약, X축으로만 이동하고 싶은 경우는 아래와 같이 사용하면 된다.

<style>
.test_box{
    translate: x 50px;
   	rotate: y 45deg;
}
</style>

3-3. @keyframes을 이용하는 경우

새로운 Syntax를 사용하면 아래와 같이 중복된 transform을 사용하지 않고 작성을 할 수 있다.

<style>
.animated_box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: transformAnimation 4s infinite;
}

@keyframes transformAnimation {
  0% {
    translate : x 0px; 
    rotate : 0deg;
    scale : 1;
  }
  25% {
    rotate : 45deg;
    scale : 1.5;
  }
  50% {
    translate : x 45px;
  }
  75% {
    scale : 2;
  }
  100% {
    translate : x 100pxp;
    rotate : 180deg;
  }
}
</style>