[CSS] transfrom 이용하기

transfrom 이용하기

• transfrom이란?
• transfrom의 translate (상하좌우 이동)
• transfrom의 scale (크기 조절)
• transfrom의 rotate (회전)
• transfrom의 skew (왜곡)

---

transfrom이란?

transfrom은 특정 요소를 움직이고 싶거나 회전을 시키고 싶거나 크기를 조절 혹은 왜곡하게 해 줍니다. 사용방법은 아래에 translate, scale, rotate, skew순으로 설명과 예시를 보이겠습니다.

---

transfrom의 translate (상하좌우 이동)

위의 예시처럼 요소를 위, 아래, 왼쪽, 오른쪽으로 이동시키고 싶은 경우에 transfrom의 함수인 translate(), translateX(), translateY()를 이용하여 이동시킬 수 있습니다. 각각의 예시를 아래에 두었습니다. (frame은 기존의 위치 item은 움직일 요소를 표현합니다.) px의 값이 -20px처럼 음수라면 위 혹은 왼쪽으로 이동합니다.

See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.

---

transfrom의 scale (크기 조절)

요소의 크기를 조절하는 방법이 애초에 크거나 작게 설정하는 방법도 있지만 scale을 이용하는 방법도 있습니다. 크기를 조절하기 위해서는 transfrom의 scale(), scaleX(), scaleY()을 이용하여 조절할 수 있습니다. 각각의 예시는 아래와 같습니다. (숫자는 배율을 의미하므로 작게 하고 싶다면 0.5처럼 1보다 작은 양의 소수로 주시면 됩니다.)

See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.

---

transfrom의 rotate (회전)

요소를 x축, y축, z 축으로 회전을 시키고 싶은 경우 rotateX(), rotateY(), rotate()를 사용하시면 됩니다. 아래의(결과 화면에서 x축 혹은 y축으로 회전시킨 경우 scale과 같아 보이지만 기울여서 보면 얇아 보이는 현상으로 생각하시면 됩니다.)

See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.

---

transfrom의 skew (왜곡)

요소를 왜곡 즉 비틀고 싶은 경우 skew(), skewX(), skewY()를 사용하면 됩니다. (각도를 음수로 주면 반대로 비틀어집니다.)

See the Pen Untitled by rainbowbear (@rainbow96bear) on CodePen.