생활코딩 CSS_10.4 변형(transform)

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