티스토리 뷰

CSS

[CSS] transform-origin

transform-origin

transform-origin 속성은 요소의 움직임 방향 및 기준점을 설정합니다. transform 속성과 같이 설정하며 기준점에 따라 애니메이션의 방향을 설정 할 수 있습니다.


transform-origin

transform-origin 요소의 움직임 방향을 정의합니다.

정의(Definition)

  • transform-origin 속성은 요소의 움직임 방향을 정의합니다.

문법(Syntax)

transform-origin : x-axis | y-axis | z-axis

속성(Property)

속성값 설명
x-axis transform X축 방향을 설정합니다.
- left
- center
- right
- length
- %
y-axis transform Y축 방향을 설정합니다.
- left
- center
- right
- length
- %
z-axis transform Z축 방향을 설정합니다.
- left
- center
- right
- length
- %

Sample1

요소의 회전에 따른 기준점을 %로 설정한 예제입니다.

결과
origin1
origin2
origin3
origin4
origin5
CSS
.origin1 {transform: rotate(10deg); transform-origin: 0% 0%;}
.origin2 {transform: rotate(20deg); transform-origin: 0% 0%;}
.origin3 {transform: rotate(30deg); transform-origin: 0% 0%;}
.origin4 {transform: rotate(40deg); transform-origin: 0% 0%;}
.origin5 {transform: rotate(50deg); transform-origin: 0% 0%;}

Sample2

요소의 회전에 따른 기준점을 %로 설정한 예제입니다.

결과
origin6
origin7
origin8
origin9
origin10
CSS
.origin6 {transform: rotate(10deg); transform-origin: 100% 100%;}
.origin7 {transform: rotate(20deg); transform-origin: 100% 100%;}
.origin8 {transform: rotate(30deg); transform-origin: 100% 100%;}
.origin9 {transform: rotate(40deg); transform-origin: 100% 100%;}
.origin10 {transform: rotate(50deg); transform-origin: 100% 100%;}

Sample3

요소의 회전에 따른 기준점을 %로 설정한 예제입니다.

결과
origin11
origin12
origin13
origin14
origin15
CSS
.origin11 {transform: rotate(10deg); transform-origin: 100% 0;}
.origin12 {transform: rotate(20deg); transform-origin: 100% 0;}
.origin13 {transform: rotate(30deg); transform-origin: 100% 0;}
.origin14 {transform: rotate(40deg); transform-origin: 100% 0;}
.origin15 {transform: rotate(50deg); transform-origin: 100% 0;}

Sample4

요소의 회전에 따른 기준점을 %로 설정한 예제입니다.

결과
origin16
origin17
origin18
origin19
origin20
CSS
.origin16 {transform: rotate(10deg); transform-origin: 0 100%; }
.origin17 {transform: rotate(20deg); transform-origin: 0 100%; }
.origin18 {transform: rotate(30deg); transform-origin: 0 100%; }
.origin19 {transform: rotate(40deg); transform-origin: 0 100%; }
.origin20 {transform: rotate(50deg); transform-origin: 0 100%; }

Sample5

요소의 회전에 따른 기준점을 %로 설정한 예제입니다.

결과
origin21
origin22
origin23
origin24
origin25
CSS
.origin21 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 0%;}
.origin22 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 25%;}
.origin23 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 50%;}
.origin24 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 75%;}
.origin25 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 100%;}

Sample6

요소의 회전에 따른 기준점을 %로 설정한 예제입니다.

결과
origin26
origin27
origin28
origin29
origin30
CSS
.origin26 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 0%;}
.origin27 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 25%;}
.origin28 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 50%;}
.origin29 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 75%;}
.origin30 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 100%;}

Sample7

요소의 회전에 따른 기준점을 %로 설정한 예제입니다.

결과
origin31
origin32
origin33
origin34
origin35
CSS
.origin31 {transform: rotate3d(0,1,0,10deg); transform-origin:100% 100%;}
.origin32 {transform: rotate3d(0,1,0,20deg); transform-origin:100% 100%;}
.origin33 {transform: rotate3d(0,1,0,30deg); transform-origin:100% 100%;}
.origin34 {transform: rotate3d(0,1,0,40deg); transform-origin:100% 100%;}
.origin35 {transform: rotate3d(0,1,0,50deg); transform-origin:100% 100%;}

Sample8

요소의 회전에 따른 기준점을 %로 설정한 예제입니다.

결과
origin36
origin37
origin38
origin39
origin40
CSS
.origin36 {transform: rotate3d(0,1,0,-10deg); transform-origin:100% 100%;}
.origin37 {transform: rotate3d(0,1,0,-20deg); transform-origin:100% 100%;}
.origin38 {transform: rotate3d(0,1,0,-30deg); transform-origin:100% 100%;}
.origin39 {transform: rotate3d(0,1,0,-40deg); transform-origin:100% 100%;}
.origin40 {transform: rotate3d(0,1,0,-50deg); transform-origin:100% 100%;}

Sample9

요소의 회전에 따른 기준점을 %로 설정한 예제입니다.

결과
origin41
origin42
origin43
origin44
origin45
CSS
.origin41 {transform: rotate3d(0,1,0,10deg); transform-origin:0% 0%; }
.origin42 {transform: rotate3d(0,1,0,20deg); transform-origin:0% 0%;}
.origin43 {transform: rotate3d(0,1,0,30deg); transform-origin:0% 0%;}
.origin44 {transform: rotate3d(0,1,0,40deg); transform-origin:0% 0%;}
.origin45 {transform: rotate3d(0,1,0,50deg); transform-origin:0% 0%;}

Sample10

요소의 회전에 따른 기준점을 %로 설정한 예제입니다.

결과
origin46
origin47
origin48
origin49
origin50
CSS
.origin46 {transform: rotate3d(0,1,0,-10deg); transform-origin:0% 0%;}
.origin47 {transform: rotate3d(0,1,0,-20deg); transform-origin:0% 0%;}
.origin48 {transform: rotate3d(0,1,0,-30deg); transform-origin:0% 0%;}
.origin49 {transform: rotate3d(0,1,0,-40deg); transform-origin:0% 0%;}
.origin50 {transform: rotate3d(0,1,0,-50deg); transform-origin:0% 0%;}

호환성(Compatibility) 더보기

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
transform-origin 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • CSS Transforms Module Level 1

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼