transform 속성 translate, scale, rotate 변환 함수 예시

transform 속성을 사용하여 요소의 위치, 크기, 회전을 지정할 수 있다.

게시물에서 예시로 작성한 함수는 아래와 같다

 

2D 변환 함수

• translate(x, y)
• translateX(x)
• translateY(y)
• scale(x, y)
• scaleX(x)
• scaleY(y)
• rotate(degree) : 시계방향(양수+) ,  반시계 방향(음수-)

 

3D 변환 함수

• rotateX(x) : X축 회전
• rotateY(y) : X축 회전

 

---

 

See the Pen Untitled by yuran (@rubberduck12345) on CodePen.

 

rotateX와 rotateY는 처음에는 무슨 뜻인지 와닿지 않았는데

위 예시처럼 텍스트를 넣고 글자가 뒤집히는 것을 보고 나서야 정확하게 이해할 수 있었다.

마시멜로우를 가로로 꽂아서 빙빙 돌리는지

세로로 꽂아서 빙빙 돌리는지의 차이로 생각하면 되겠다 🙄💦