10.4 변형(transform)

Element의 크기, 위치, 모양을 변경하는 속성

Transform

transform 속성 값으로 변형 종류를 적은 뒤 괄호 안에 정도를 표기한다.

h1 {
    /* x축 방향으로 2배 늘림 */
    transform: scaleX(2);
}

x축, y축 방향을 별도로 지정할 수 있는 변형이 많으며 x, y축 방향으로 모두 변형시키고 싶으면 한 줄안에 적어야한다.

h1 {
    /* 두 번째 줄의 y축 방향 변형만 적용됨 */
    transform: scaleX(2);
    transform: scaleY(2);

    /* x, y축 방향 모두 변형이 적용됨 */
    transform: scaleX(2) scaleY(2);
}

그 외 효과는 강좌 페이지의 codepen 자료를 참조
Transform 종류에 따른 단위는 MDN web docs transform의 syntax에서 확인
e.g) Rotate: deg(degree), rad, turn 등

Transform-origin

효과가 적용 될 기준을 지정.

hl {
    /* 왼쪽 상단을 기준으로 x축 100% y축 0인 지점 */
    /* 즉, 오른쪽 상단이 변형 기준 */
    transform-origin: 100% 0 0;

    /* 왼쪽 상단이 변형 기준 */
    transform-origin: left top;
}

참고

CSS 생활코딩 - 변형(transform)

CSS3 Transform by Poiemaweb
CSS3 트랜스폼 by by Jaehee's WEBCLU