TRANSFORM

TRANSFORM

Transform

변환은 엘리먼트의 좌표를 조작하여 위치나 크기, 회적 각도 등을 변경하는 기법입니다. 변환함수는 이동(translate), 확대(scale), 회전(rotate), 기울이기(skew) 등의 주용 4가지 함수와 행렬변환, 원근변환이 있습니다.

	이동(translate)	확대(scale)	회전(rotate)	기울이기(skew)
2d변환	translate(x,y)	scale(x,y)	rotate(angle)	skew(x-angle,y-angle)
3d변환	translate3d(x,y,z)	scale3d(x,y,z)	rotate3d(ax,y,z,angle)
x축 변환	translateX(x)	scaleX(x)	rotateX(angle)	skewX(angle)
y축 변환	translateY(y)	scaleY(y)	rotateY(angle)	skewY(angle)
z축 변환	translateZ(z)	scaleZ(z)	rotateZ(angle)

translate

Porperty	Sample	Description
translate	transform: translate(10px, 20px);	선택한 요소의 X좌표, Y좌표 이동을 나타냅니다.
translate3d	transform: translate3d(10px, 20px, 30px);	선택한 요소의 X좌표, Y좌표, Z좌표 이동을 나타냅니다.
translateX	transform: translateX(10px)	선택한 요소의 X좌표 이동을 나타냅니다.
translateY	transform: translateY(10px)	선택한 요소의 Y좌표 이동을 나타냅니다.
translateZ	transform: translateZ(10px)	선택한 요소의 Z좌표 이동을 나타냅니다.

translate1

translate2

translate3

translate4

translate5

.translate1 {transform: translate(10px, 10px);}
.translate2 {transform: translate(20px, 20px);}
.translate3{transform: translate(30px, 30px);}
.translate4 {transform: translate(40px, 40px);}
.translate5 {transform: translate(50px, 50px);}

translate6

translate7

translate8

translate9

translate10

.translate6 {transform: translateX(10px);}
.translate7 {transform: translateX(20px);}
.translate8 {transform: translateX(30px);}
.translate9 {transform: translateX(40px);}
.translate10 {transform: translateX(50px);}

translate11

translate12

translate13

translate14

translate15

.translate11 {transform: translateY(10px);}
.translate12 {transform: translateY(20px);}
.translate13 {transform: translateY(30px);}
.translate14 {transform: translateY(40px);}
.translate15 {transform: translateY(50px);}

translate16

translate17

translate18

translate19

translate20

.translate16 {transform: translateZ(10px);}
.translate17 {transform: translateZ(20px);}
.translate18 {transform: translateZ(30px);}
.translate19 {transform: translateZ(40px);}
.translate20 {transform: translateZ(50px);}

translate21

translate22

translate23

translate24

translate25

.translate21 {transform: translateZ(-10px);}
.translate22 {transform: translateZ(-20px);}
.translate23 {transform: translateZ(-30px);}
.translate24 {transform: translateZ(-40px);}
.translate25 {transform: translateZ(-50px);}

scale

Porperty	Sample	Description
scale	transform: scale(2, 2);	선택한 요소의 X축, Y축 확대를 나타냅니다.
scale3d	transform: scale3d(2, 2, 2);	선택한 요소의 X축, Y축, Z축 확대를 나타냅니다.
scaleX	transform: scaleX(2);	선택한 요소의 X축 확대를 나타냅니다.
scaleY	transform: scaleY(2);	선택한 요소의 Y축 확대를 나타냅니다.
scaleZ	transform: scaleZ(2);	선택한 요소의 Z축 확대를 나타냅니다.

scale1

scale2

scale3

scale4

scale5

.scale1 {transform: scale(1.1, 1.1);}
.scale2 {transform: scale(1.2, 1.2);}
.scale3 {transform: scale(1.3, 1.3);}
.scale4 {transform: scale(1.4, 1.4);}
.scale5 {transform: scale(1.5, 1.5);}

scale6

scale7

scale8

scale9

scale10

.scale6 {transform: scale(0.9, 1.1);}
.scale7 {transform: scale(0.8, 1.2);}
.scale8 {transform: scale(0.7, 1.3);}
.scale9 {transform: scale(0.6, 1.4);}
.scale10 {transform: scale(0.5, 1.5);}

scale11

scale12

scale13

scale14

scale15

.scale11 {transform: scaleX(1.1);}
.scale12 {transform: scaleX(1.2);}
.scale13 {transform: scaleX(1.3);}
.scale14 {transform: scaleX(1.4);}
.scale15 {transform: scaleX(1.5);}

scale16

scale17

scale18

scale19

scale20

.scale16 {transform: scaleY(1.1);}
.scale17 {transform: scaleY(1.2);}
.scale18 {transform: scaleY(1.3);}
.scale19 {transform: scaleY(1.4);}
.scale20 {transform: scaleY(1.5);}

rotate1

rotate2

rotate3

rotate4

rotate5

.rotate1 {transform: rotate(10deg);}
.rotate2 {transform: rotate(20deg);}
.rotate3 {transform: rotate(30deg);}
.rotate4 {transform: rotate(40deg);}
.rotate5 {transform: rotate(50deg);}

rotate6

rotate7

rotate8

rotate9

rotate10

.rotate6 {transform: rotateX(10deg);}
.rotate7 {transform: rotateX(20deg);}
.rotate8 {transform: rotateX(30deg);}
.rotate9 {transform: rotateX(40deg);}
.rotate10 {transform: rotateX(50deg);}

rotate11

rotate12

rotate13

rotate14

rotate15

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

rotate16

rotate17

rotate18

rotate19

rotate20

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

rotate21

rotate22

rotate23

rotate24

rotate25

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

rotate

Porperty	Sample	Description
rotate	transform: rotate(10deg);	선택한 요소의 회전을 나타냅니다.
rotate3d	transform: rotate3d(0, 1, 0, 10deg);	선택한 요소의 3d회전을 나타냅니다.
rotateX	transform: rotateX(10deg);	선택한 요소의 X축 회전을 나타냅니다.
rotateY	transform: rotateY(10deg);	선택한 요소의 Y축 회전을 나타냅니다.
rotateZ	transform: rotateZ(10deg);	선택한 요소의 Z축 회전을 나타냅니다.

skew

Porperty	Sample	Description
skew	transform: skew(10deg, 10deg);	선택한 요소의 X축, Y축 기울기를 나타냅니다.
skewX	transform: skewX(10deg);	선택한 요소의 X축 기울기를 나타냅니다.
skewY	transform: skewY(10deg);	선택한 요소의 Y축 기울기를 나타냅니다.
rotateZ	transform: rotateZ(10deg);	선택한 요소의 Z축 회전을 나타냅니다.

skew1

skew2

skew3

skew4

skew5

.skew1 {transform: skew(10deg, 10deg);}
.skew2 {transform: skew(20deg, 20deg);}
.skew3 {transform: skew(30deg, 30deg);}
.skew4 {transform: skew(40deg, 40deg);}
.skew5 {transform: skew(50deg, 50deg);}

skew6

skew7

skew8

skew9

skew10

.skew6 {transform: skewX(10deg);}
.skew7 {transform: skewX(20deg);}
.skew8 {transform: skewX(30deg);}
.skew9 {transform: skewX(40deg);}
.skew10 {transform: skewX(50deg);}

skew11

skew12

skew13

skew14

skew15

.skew11 {transform: skewY(10deg);}
.skew12 {transform: skewY(20deg);}
.skew13 {transform: skewY(30deg);}
.skew14 {transform: skewY(40deg);}
.skew15 {transform: skewY(50deg);}

transform-origin

Porperty	Sample	Description
transform-origin	transform-origin: 20% 30%;	선택한 요소의 X축, Y축 기준점 나타냅니다.
transform-style	transform-style: preserve-3d;	선택한 요소 스타일을 설정합니다.
perspective	perspective: 500px;	선택한 요소의 원근점 거리를 설정합니다.
perspective-origin	perspective-origin: 100px	선택한 요소의 원근점 방향을 설정합니다.
backface-visibility	backface-visibility: hidden;	선택한 요소의 3D 뒷면의 배경 유무를 설정합니다.

origins1

origins2

origins3

origins4

origins5

.origins1 {transform: rotate(10deg); transform-origin: 0% 0%;}
.origins2 {transform: rotate(10deg); transform-origin: 0% 0%;}
.origins3 {transform: rotate(10deg); transform-origin: 0% 0%;}
.origins4 {transform: rotate(10deg); transform-origin: 0% 0%;}
.origins5 {transform: rotate(10deg); transform-origin: 0% 0%;}

origins6

origins7

origins8

origins9

origins10

.origins6 {transform: rotate(10deg); transform-origin: 100% 100%;}
.origins7 {transform: rotate(10deg); transform-origin: 100% 100%;}
.origins8 {transform: rotate(10deg); transform-origin: 100% 100%;}
.origins9 {transform: rotate(10deg); transform-origin: 100% 100%;}
.origins10 {transform: rotate(10deg); transform-origin: 100% 100%;}

origins11

origins12

origins13

origins14

origins15

.origins11 {transform: rotate(10deg); transform-origin: 100% 0%;}
.origins12 {transform: rotate(20deg); transform-origin: 100% 0%;}
.origins13 {transform: rotate(30deg); transform-origin: 100% 0%;}
.origins14 {transform: rotate(40deg); transform-origin: 100% 0%;}
.origins15 {transform: rotate(50deg); transform-origin: 100% 0%;}

origins16

origins17

origins18

origins19

origins20

.origins16 {transform: rotate(10deg); transform-origin: 0% 100%;}
.origins17 {transform: rotate(20deg); transform-origin: 0% 100%;}
.origins18 {transform: rotate(30deg); transform-origin: 0% 100%;}
.origins19 {transform: rotate(40deg); transform-origin: 0% 100%;}
.origins20 {transform: rotate(50deg); transform-origin: 0% 100%;}

origins21

origins22

origins23

origins24

origins25

.origins21 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 0%;}
.origins22 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 25%;}
.origins23 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 50%;}
.origins24 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 75%;}
.origins25 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 100%;}

origins26

origins27

origins28

origins29

origins30

.origins26 {transform: rotate3d(0,0,0,10deg); transform-origin: 100% 100%;}
.origins27 {transform: rotate3d(0,1,0,20deg); transform-origin: 100% 100%;}
.origins28 {transform: rotate3d(0,1,0,30deg); transform-origin: 100% 100%;}
.origins29 {transform: rotate3d(0,1,0,40deg); transform-origin: 100% 100%;}
.origins30 {transform: rotate3d(0,1,0,50deg); transform-origin: 100% 100%;}

origins31

origins32

origins33

origins34

origins35

.origins31 {transform: rotate3d(0,0,0,-10deg); transform-origin: 100% 100%;}
.origins32 {transform: rotate3d(0,1,0,-20deg); transform-origin: 100% 100%;}
.origins33 {transform: rotate3d(0,1,0,-30deg); transform-origin: 100% 100%;}
.origins34 {transform: rotate3d(0,1,0,-40deg); transform-origin: 100% 100%;}
.origins35 {transform: rotate3d(0,1,0,-50deg); transform-origin: 100% 100%;}

origins36

origins37

origins38

origins39

origins40

.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%; }

origins41

origins42

origins43

origins44

origins45

.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%; }

origins46

origins47

origins48

origins49

origins50

.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%; }