[CSS]2D Transforms

transform, transitions, animations, keyframes

Transform

• 요소를 이동(move), rotate(회전), scale(), skew(비튼다) 기능

---

translate()

요소를 현재 위치에서(x축과 y축에 대한 지정된 매개변수에 따라) 이동합니다.

origin:

현재 위치에서 x축을 50px, y축을 100px이동해보겠습니다.

인자로 음수값도 가능합니다.

---

rotate()

주어진 각도에 따라 요소를 시계 방향 또는 반시계 방향으로 회전합니다.

origin:

rotate의 인자값에 따라 시계방향으로 회전합니다.

rotate에 인자로 음의 값을 사용하면 반시계 방향으로 회전합니다.

---

scale()

지정된 매개 변수에 따라 요소의 크기를 늘리거나 줄입니다.

origin:

너비를 2배, 높이를 3배 늘렸습니다.

하지만 개발자도구에서 실제 크기는 늘어나지 않았습니다.

이번에는 너비와 높이를 0.5배로 줄여보겠습니다.

margin도 같이 늘어나네요.

그런데 인자값으로 비율만 넣을 수 있는걸까요. bing에게 물어봤습니다.

인자로는 비율만 들어갈 수 있네요.

또, x축과 y축을 따로 지정하고 싶으면 scaleX, scaleY를 사용할 수 있습니다.

---

skew()

지정된 각도만큼 x축과 y축을 따라 오소를 기울입니다.

설명을 위해 skewX, skewY를 사용해 x축과 y축을 따로 기울여보겠습니다.

origin:

물론 인자로 음수값도 사용할 수 있습니다.

---

matrix()

모든 2D trasform을 하나로 결합합니다.

div {
	transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());
}

매개변수의 순서는 위와 같습니다.

위와 같이 사용할 수 있다고 하는데요. 너무 복잡해서 제가 사용할 일은 없을거같습니다.

하지만, 다른 상용화된 사이트에서 개발자도구를 띄워 요소를 보고 있으면 matrix를 자주 찾아볼 수 있습니다.

matrix에 지정되어있는 value도 워낙 복잡하게 되어있어서 대체 저게 뭔가 했는데 2D trasition을 한번에 처리하는 메소드라는 것을 알게되었네요!