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

translate1

translate2

translate3

translate4

translate5

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

translate1

translate2

translate3

translate4

translate5

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

translate1

translate2

translate3

translate4

translate5

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

translate1

translate2

translate3

translate4

translate5

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

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,0.9);}     .scale7 {transform: scale(0.8,0.8);}     .scale8 {transform: scale(0.7,0.7);}     .scale9 {transform: scale(0.6,0.6);}     .scale10 {transform: scale(0.5,0.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);} 

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축 회전을 나타냅니다.

translate1

translate2

translate3

translate4

translate5

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

translate6

translate7

translate8

translate9

translate10

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

translate11

translate12

translate13

translate14

translate15

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

translate16

translate17

translate18

translate19

translate20

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

translate21

translate22

translate23

translate24

translate25

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

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 뒷면의 배경 유무를 설정합니다.

origin1

origin2

origin3

origin4

origin5

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

origin6

origin7

origin8

origin9

origin10

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

origin11

origin12

origin13

origin14

origin15

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

origin16

origin17

origin18

origin19

origin20

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

origin21

origin22

origin23

origin24

origin25

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

origin26

origin27

origin28

origin29

origin30

    .origin26 {transform: rotate3d(0,1,0,10deg); transform-origin: 100% 100%;}     .origin27 {transform: rotate3d(0,1,0,20deg); transform-origin: 100% 100%;}     .origin28 {transform: rotate3d(0,1,0,30deg); transform-origin: 100% 100%;}     .origin29 {transform: rotate3d(0,1,0,40deg); transform-origin: 100% 100%;}     .origin30 {transform: rotate3d(0,1,0,50deg); transform-origin: 100% 100%;} 

origin31

origin32

origin33

origin34

origin35

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

origin36

origin37

origin38

origin39

origin40

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

origin41

origin42

origin43

origin44

origin45

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

origin46

origin47

origin48

origin49

origin50

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

Transform Sample

See the Pen CSS3 Perspective Playground ✨ by Mehmet Burak Erman 🦌 (@mburakerman) on CodePen.