Properties

Properties

Editing
  • account_tree
  • bug_report

transform

요소에게 회전, 크기, 이동, 뒤틀림 등의 처리를 할 수 있다.

설명

웹브라우저의 버전에 따라서 3D 변형도 가능하다.

사용 가능한 값 타입

〈'transform'〉

  • none | <transform-list>
    CSS Transforms Module Level 1

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈transform-list〉

    변형을 주기 위한 다양한 관련 함수들이 사용되는 타입이다.

    • <transform-function>+

일반적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

    어떠한 값도 설정하지 않음을 나타낸다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • noneCSS3

    변형 효과를 적용하지 않는다.

  • matrix(n,n,n,n,n,n)CSS3

  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)CSS3

  • translate(x,y)CSS3

    x축과 y축의 좌표값을 이용하여 이동처리한다. 매개 변수의 타입은 단위 px를 사용한 정수이다.

  • translate3d(x,y,z)CSS3

  • translate(x)CSS3

    매개 변수의 값을 통해 x축으로 이동 처리한다. 매개 변수의 타입은 단위 px를 사용한 정수이다.

  • translateY(y)CSS3

  • translateZ(z)CSS3

  • scale(horizontal-rate,vertical-rate)CSS3

  • scaleX(horizontal-rate)CSS3

  • scaleY(vertical-rate)CSS3

  • scaleZ(Z-axis-rate)CSS3

  • rotate(angle)CSS3

  • rotate3d(x,y,z,angle)CSS3

  • rotateX(angle)CSS3

  • rotateY(angle)CSS3

  • rotateZ(angle)CSS3

  • skew(x-angle,y-angle)CSS3

  • skewX(angle)CSS3

  • skewY(angle)CSS3

  • perspective(n)CSS3

구문

  • transform scale(1.5) rotate(45deg);

    한 개 이상의 변형 함수를 지정한다.

  • object.style.transform = "scale(1.5)";CSS3

    자바스크립트 형식

버전 명세

Modules
Module NameStatusSummary
CSS Transforms Module Level 1추천 후보

Last review date: 2022-11-17

지원 웹브라우저