> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/css-2/transform-transition-animation/2d.md).

# 2D 트랜스폼

## 2D 트랜스폼 (Transform)

* 회전
  * rotateX(angle)
  * rotateY(angle)
  * rotate(angle)<br>
* 크기
  * scaleX() // **scalex(1) = 1 값은 100%를 의미**
  * scaleY()
  * scale(x, y) (X, Y 동시에 적용)
  * scale() (X, Y 동시에 같은 값을 적용)
  * 값이 1보다 작아지면 크기가 작아지고 1보다 커지면 크기가 커진다.<br>
* 이동
  * translateX()
  * translateY()
  * translate(x, y) (X, Y 동시에 적용)<br>
* 비틈
  * skewX()
  * skewY()
  * skew(x, y)

```css
  /* 회전 */
  .headline {
    transform: rotateX(30deg);
    transform: rotateY(60deg);
    transform: rotate(90deg);
    transform: rotate(1.2turn);
  }

  /* 크기 */
  .headline {
    transform: scaleX(1.5); (너비를 잡아 당기다)
    transform: scaleX(1.5) scaleY(0.7); (너비를 당기고 길이를 줄이다.)
    transform: scale(1.5, 0.7);
    transform: scale(1.5);
  }

  /* 이동 */
  .headline {
    transform: translateX(-40px) translateY(-140px) rotate(10deg);
    transform: translate(120px -40px)
  }

  /* 비틈 */
  .headline {
    transform: skewX(30deg);
    /* transform: skew(15deg, 15deg); */
  }

  /* 이미지의 회전축 */
  .headline {
    transform-origin: 50% 50% (x, y 기본값)
    transform: rotate(70deg);
  }
```

## 주의

```css
.headline {
  transform: scaleX(0.5);
  transform: scaleY(0.5); /* 아래에 있는 y값이 위의 x값을 덮어쓰게 된다. */
  /* transform: scale(0.5,0.5); */
  /* transform: scaleX(0.5) scaleY(0.5) */
}
```

* 한 요소에 여러개의 `<transform>`을 사용할 때는 확인

## 참고&#x20;

* [codepen 트랜스폼 실습 ](https://codepen.io/hanna244/pen/GRjeGmX)
* [트랜스폼 사용하기](https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
* [트랜스폼 문법](https://developer.mozilla.org/ko/docs/Web/CSS/transform)