transform2 [CSS] transform에서 자주 사용하는 함수 정리, perspective 함수와 속성, backface-visibility 속성 transform 변환함수를 속성값으로 사용해 요소를 변환시키는 속성 원근거리를 나타내는 함수 perspective()를 transform의 value로 제일 앞에 사용해야한다 원근거리함수를 속성값으로 주고 싶지 않다면 변환함수만 속성값으로 넣을 수 있다 div { transform: perspective(), 변환함수1 변환함수2 변환함수3…; } transform의 속성값 종류 (변환함수 종류) 1. translate(x, y) 요소를 화면에서 X축으로 x만큼, Y축으로 y만큼 이동 단위: px 개별함수로도 사용 가능 translateX(x): 요소를 화면에서 X축으로 x만큼 이동 translateY(y): 요소를 화면에서 Y축으로 y만큼 이동 2. scale(x, y) 요소의 크기를 X축으로 x배,.. 2022. 5. 23. [CSS] transform, keyframes로 애니메이션 효과 주기 transform vs keyframes transform: 상태가 한번 바뀔때 사용 (a → b) keyframes: 상태가 여러번 바뀔때 사용 (a → b → a, a → b → c) transform 속성 1. rotate() 플러스는 오른쪽으로 마이너스는 왼쪽으로 회전 div { transform: rotate(90deg); } 2. translate() translateX는 X축 좌표로 translateY는 Y축 좌표로 이동한다 X, Y가 없는 translate()은 X, Y값을 모두 움직일 수 있다 엘리먼트를 움직이는 에니메이션을 줄 경우에는 padding, margin으로 이동하는 것보다 translate()이 더 빨리 움직인다 div { transform: translate(100px, 1.. 2022. 5. 10. 이전 1 다음
