• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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

부모요소의 속성값 상속.

 


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

분류 제목
transform CSS - transform 속성 ★ - 요소 (회전/비틀기/크기확대) 변환 + 마우스 허버 시 줌효과 (=…
transform CSS - transform-origin 속성 - 변형요소 위치 변경. ( = transform-origin…
transform CSS - transform-style 속성 - 중첩요소를 3D공간에서 표시 방법 (= transform-s…
transform CSS - perspective 속성 - 3D요소의 원근 조망. (= perspective속성 = 퍼스펙티브…
transform CSS - perspective-origin 속성 - 3D요소 바라보는 위치 (= perspective-or…
transform CSS - backface-visibility 속성 - 3D요소 뒷면 노출 여부. (= backface-vi…
목록
찾아주셔서 감사합니다. Since 2012