[transform] CSS - transform-origin 속성 - 변형요소 위치 변경. ( = transform-origin속성 = 트랜스폼오리진속성)

1. transform-origin 예제 - 변형된 요소 위치 변경
2. transform-origin 정의
3. 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축 위치. (※ 가능값 종류)

• length : (예) 50px

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.