[CSS] display : grid

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

 

저작자표시