CSS - transform 은 적용 대상을 뒤틀거나, 회전시키거나, 크기를 변환시키고, 이동시킬 수 있습니다. 각 요소들에 대해 알아보겠습니다.
▼transform 속성
scale - 크기
rotate - 회전
translate - 위치값
skew - 뒤틀기
See the Pen wvWyOBR by parang1 (@parang1) on CodePen.
scale
scale은 대상을 확대하거나 축소시킵니다.
- scale(2)는 가로, 세로를 2배 확대시키고, 따로 X축, Y축만 설정하여 확대 시킬 수 있습니다.
rotate
대상을 회전 시킵니다. 기본단위는 deg입니다.
translate
대상의 위치를 변경시킵니다.
translate(20px) 처럼 translateY값은 생략가능하지만 0으로 적용됩니다.
skew
대상을 뒤틀 수 있습니다. 기본 단위는 deg입니다.
* transform-origin
transform-origin
기준점을 설정할때 쓰는 css 요소입니다 기본 기준점은 50%, 50%로 중앙인데, 이 요소에 설정값을 주면 원하는 위치로 기준점을 설정할 수 있습니다.
transform-origin: right bottom; : 오른쪽 아래 기준점
= 100% 100%;