2D 트랜스폼

2D 트랜스폼 (Transform)

• 회전

  • rotateX(angle)

  • rotateY(angle)

  • rotate(angle)

• 크기

  • scaleX() // scalex(1) = 1 값은 100%를 의미

  • scaleY()

  • scale(x, y) (X, Y 동시에 적용)

  • scale() (X, Y 동시에 같은 값을 적용)

  • 값이 1보다 작아지면 크기가 작아지고 1보다 커지면 크기가 커진다.

• 이동

  • translateX()

  • translateY()

  • translate(x, y) (X, Y 동시에 적용)

• 비틈

  • skewX()

  • skewY()

  • skew(x, y)

  /* 회전 */
  .headline {
    transform: rotateX(30deg);
    transform: rotateY(60deg);
    transform: rotate(90deg);
    transform: rotate(1.2turn);
  }

  /* 크기 */
  .headline {
    transform: scaleX(1.5); (너비를 잡아 당기다)
    transform: scaleX(1.5) scaleY(0.7); (너비를 당기고 길이를 줄이다.)
    transform: scale(1.5, 0.7);
    transform: scale(1.5);
  }

  /* 이동 */
  .headline {
    transform: translateX(-40px) translateY(-140px) rotate(10deg);
    transform: translate(120px -40px)
  }

  /* 비틈 */
  .headline {
    transform: skewX(30deg);
    /* transform: skew(15deg, 15deg); */
  }

  /* 이미지의 회전축 */
  .headline {
    transform-origin: 50% 50% (x, y 기본값)
    transform: rotate(70deg);
  }

주의

.headline {
  transform: scaleX(0.5);
  transform: scaleY(0.5); /* 아래에 있는 y값이 위의 x값을 덮어쓰게 된다. */
  /* transform: scale(0.5,0.5); */
  /* transform: scaleX(0.5) scaleY(0.5) */
}

• 한 요소에 여러개의 <transform>을 사용할 때는 확인

참고

• codepen 트랜스폼 실습

• 트랜스폼 사용하기

• 트랜스폼 문법