프론트 054 - transform

규링규링규리링·2024년 8월 22일

프론트 공부하기

목록 보기
54/135

transform

이게 전부 다는 아니고 자주 사용하는 4가지
또한 transform은 중첩해서 여러가지 속성을 동시에 적용시키는것도 가능함

translate(x,y)

값은 양수, 음수 모두 입력 가능

만약 x,y 형식이 아니고 숫자 하나만 입력하면 해당값이 x,y 두개값 모두에 적용

translateX(n) / translateY(n)

scale(x,y)

위 같은 경우는 x축은 0.75배로 축소, y축은 1.1배로 확대 시킴

scaleX(n) / scaleY(n)

skew(x-angle, y-angle)

기울듯이 변형이 가능함

skewX(n) / skewY(n)

rotate(angle)

입력한 수치만큼 시계방향으로 회전

중첩적용 시키기

예시 1번

예시2번

0개의 댓글