# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/html-and-css/css-2/transform-transition-animation/2d.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.