transform-origin

정의 및 사용

transform-origin 속성은 transform 속성을 사용할 때 함께 사용하는데, 어떠한 변형 효과를 줄 때 그 도형의 기준 축을 지정해주는 값이다. 2D에서는 x와 y 기준점을 설정하며 3D에서는 z축까지 지정할 수 있다.

정의 및 사용
기본값 50% 50% 0
상속 no
버전 CSS3
자바스크립트 구문 object.style.transformOrigin=”20% 40%”

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원 안함Chrome 지원Firefox 지원Opera 지원Safari 지원

각 브라우저 마다 접두사를 사용하면 2D transform 이 사용가능하며, 3D 는 Safari 와 Chrome 에서만 지원한다. (IE는 9부터 지원)

구문

속성

속성 값 설명
설명
x-axis x 축의 기준을 어디로 할지 지정
( 사용 가능한 값 : left, center, right, length, % )
y-axis y 축의 기준을 어디로 할지 지정
( 사용 가능한 값 : top, center, bottom, length, % )
z-axis z 축의 기준을 어디로 할지 지정
( 사용 가능한 값 : length )

예제

버그 및 이슈

소제목

목록 으로

댓글