바삭한달고나 지식창고
article thumbnail
transform 속성 translate, scale, rotate 변환 함수 예시
웹개발 2022. 12. 5. 14:46

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는 처음에는 무슨 뜻인지 와닿지 않았는데 위 예시처럼 텍스트를 넣고 글자가 뒤집히는 것을 보고 나서야 정확하게 이해할 수 있었다. 마시멜로우..