목차
- transform-origin 예제 - 변형된 요소 위치 변경
- transform-origin 정의
- transform-origin 구문
transform-origin 예제 - 변형된 요소 위치 변경
<style>
#box {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid gray;
}
#hz {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
-ms-transform: rotate(20deg); /* IE9 */
-ms-transform-origin: 20% 40%; /* IE9 */
transform: rotate(20deg);
transform-origin: 20% 40%;
}
</style>
<div id="box">
<div id="hz">홈짱닷컴 Homzzang.com</div>
</div>
결과보기
transform-origin 정의
변형된 (transformed) 요소 위치 변경.
1.
- 2D (= 2차원) 변형된 요소: (X, Y)축 위치 변경 가능.
- 3D (= 3차원) 변형된 요소: (X, Y, Z)축 위치 변경 가능.
2.
transform 속성과 함께 사용. ★ 즉, 변형 안 된 요소엔 영향 X.
PS. 변형되도 원래와 동일 시 영향 X. (예: 0도 회전 = 360도 회전)
3.
- 기본값: 50% 50% 0
- 상속여부: X
- 애니효과: O
- CSS버전: CSS3
- JS구문: object.style.transformOrigin="0 0"
4.
IE9 이상 주요 최신브라우저 모두 지원.
※ IE9 경우, -ms- 접두어 필요함.
5. MDN transform-origin 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
transform-origin 구문
selector {transform-origin: x-axis y-axis z-axis|initial|inherit;}
[속성값]
x-axis
X축 위치. (※ 가능값 종류)
- left : 왼쪽.
- center : 중앙.
- right : 오른쪽.
- length : (예) 50px
- % : (예) 50%
y-axis
Y축 위치. (※ 가능값 종류)
- top : 상단.
- center : 중단.
- bottom : 하단.
- length : (예) 50px
- % : (예) 50%
z-axis
Z축 위치. (※ 가능값 종류)
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.