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);}
