티스토리 뷰

CSS Animation

[CSS Animation] Rotate

Rotate

translate


회전(rotate)

회전(rotate)

속성값 예시 설명
rotate(angle) transform: rotate(10deg); 각도로 회전을 나타냅니다.
rotate3d(x,y,z,angle) transform: rotate3d(0, 1, 0, 10deg); X축, Y축, Z축 회전을 나타냅니다.
rotateX(angle) transform: rotateX(10deg); X축 회전을 나타냅니다
rotateY(angle) transform: rotateY(10deg); Y축 회전을 나타냅니다
rotateZ(angle) transform: rotateZ(10deg); Z축 회전을 나타냅니다

Sample1

rotate를 통한 회전 예제입니다.

결과
rotate01
rotate02
rotate03
rotate04
rotate05
CSS
.rotate01 {transform: rotate(10deg);}
.rotate02 {transform: rotate(20deg);}
.rotate03 {transform: rotate(30deg);}
.rotate04 {transform: rotate(40deg);}
.rotate05 {transform: rotate(50deg);}

Sample2

rotate X축을 통한 회전 예제입니다.

결과
rotate06
rotate07
rotate08
rotate09
rotate10
CSS
.rotate06 {transform: rotateX(10deg);}
.rotate07 {transform: rotateX(20deg);}
.rotate08 {transform: rotateX(30deg);}
.rotate09 {transform: rotateX(40deg);}
.rotate10 {transform: rotateX(50deg);}

Sample3

rotate Y축을 통한 회전 예제입니다.

결과
rotate11
rotate12
rotate13
rotate14
rotate15
CSS
.rotate11 {transform: rotateY(10deg);}
.rotate12 {transform: rotateY(20deg);}
.rotate13 {transform: rotateY(30deg);}
.rotate14 {transform: rotateY(40deg);}
.rotate15 {transform: rotateY(50deg);}

Sample4

rotate Y축을 통한 회전 예제입니다.

결과
rotate16
rotate17
rotate18
rotate19
rotate20
CSS
.rotate16 {transform: rotateZ(10deg);}
.rotate17 {transform: rotateZ(20deg);}
.rotate18 {transform: rotateZ(30deg);}
.rotate19 {transform: rotateZ(40deg);}
.rotate20 {transform: rotateZ(50deg);}

Sample5

rotate3D를 이용한 회전 예제입니다.

결과
rotate21
rotate22
rotate23
rotate24
rotate25
CSS
.rotate21 {transform: rotate3d(0,1,1,10deg);}
.rotate22 {transform: rotate3d(0,1,1,30deg);}
.rotate23 {transform: rotate3d(0,1,1,50deg);}
.rotate24 {transform: rotate3d(0,1,1,70deg);}
.rotate25 {transform: rotate3d(0,1,1,90deg);}

공유하기(Share) 더보기

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

공감하기(Like) 더보기

UP NEXT : Ads by Google

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