• 회원가입
  • 로그인

[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- 접두어 필요함.

 

 

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

부모요소의 속성값 상속.

 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012