Properties

Properties

Editing
  • account_tree
  • bug_report

transform-origin

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

설명

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

사용 가능한 값 타입

〈'transform-origin'〉

이 타입은 bg-position 타입의 값을 그대로 사용하나 위치를 표시하는 의미로 사용된다.

  • [ left | center | right | top | bottom | <length-percentage> ]
  • [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>?
  • [[ center | left | right ] && [ center | top | bottom ]] <length>?

사용되는 타입

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

  • 〈bg-position〉

    <'background-position'> 속성에 사용되는 값의 타입이다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

    • [ left | center | right | top | bottom | <length-percentage> ]
      |
      [ left | center | right | <length-percentage> ]
      [ top | center | bottom | <length-percentage> ]
      |
      [ center | [ left | right ] <length-percentage>? ] &&
      [ center | [ top | bottom ] <length-percentage>? ]
      CSS Backgrounds and Borders Module Level 3
  • 〈length-percentage〉

    <length>와 <percentage> 타입을 나타낸다.

    • <length> | <percentage>

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

구문

  • transform-origin x-axis y-axis;CSS3

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

  • transform-origin x-axis y-axis z-axis;CSS3

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

  • object.style.transformOrigin = "0 0";CSS3

    CSS 기본 값으로 설정한다.

테스트 도구

(1) rotate 테스트

(2) translate 테스트

지원 웹브라우저