Properties

Properties

Draft
  • account_tree
  • bug_report

transform-origin

transform 속성을 통해 변형이 적용될 경우에 변형의 기준점을 설정할 수 있다.

설명

기본 값은 50% 50% 0 이다.

설정 가능한 속성 값

  • x-axis좌표단위허용CSS3

    숫자와 단위를 이용하거나 상수를 이용하여 X축 좌표값을 설정한다. 기본 값은 50%이다

    • 사용 가능한 단위: px, %
    • 사용 가능한 키워드 : left, right, center
  • y-axis좌표단위허용CSS3

    숫자와 단위를 이용하거나 상수를 이용하여 Y축 좌표값을 설정한다. 기본 값은 50%이다

    • 사용 가능한 단위: px, %
    • 사용 가능한 키워드 : top, bottom, center
  • z-axis숫자단위허용CSS3

    숫자와 단위를 이용하여 3차원 Z축 좌표값을 설정한다. 기본 값은 0이다

    • 사용 가능한 단위: px
  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • transform-origin x-axis y-axis;기본형식CSS3

    2차원 변형의 기준 위치를 지정한다.

  • transform-origin x-axis y-axis z-axis;기본형식CSS3

    3차원 변형의 기준 위치를 지정한다.

  • transform-origin initial;기본형식CSS3

    CSS 기본 값으로 설정한다.

  • object.style.transformOrigin = "0 0";자바스크립트 형식CSS3

    CSS 기본 값으로 설정한다.

테스트 도구

(1) rotate 테스트

(2) translate 테스트

지원 웹브라우저