CSS - 변형 효과

변형 속성

transform - 2d, 3d 존재

translate();

translateX(100px); → 우측으로 100px 이동 , (-100px) → 좌측으로 100px 이동

translateY(100px); → 하단으로 100px 이동, (-100px) → 상단으로 100px 이동

translate(100px, 100px); →X, Y 한번에 이동

 

Scale();

ScaleX(2); → 2배 확대 (좌우 반반)

ScaleY(2); → 2배 확대 (상하 반반)

Scale(2, 2); → 2배 확대 (상하좌우)

 

skew();

skewX(30deg); → X축 기준으로 비틀기 각도만큼 비틀어짐

skewY(30deg); → Y축 기준으로 비틀기 각도만큼 비틀어짐

skew(30deg, 30deg); → X축, Y축 기준으로 비틀기 각도만큼 비틀어짐

 

rotate(); → 3d 관점에서 생각해야 함

rotateX(30deg); → X축 기준으로 30도 회전

rotateY(30deg); → Y축 기준으로 30도 회전

rotate(30deg); → 우측으로 30도 회전, (-30deg) → 좌측으로 30도 회전 (회전의 중심축이 도형의 중앙)

+ tranform-origin 속성을 통해 기준점을 변경할 수 있음

ex. tranform-origin: top left;

 

+ 요소를 화면 정중앙에 배치하고 싶을 때

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);