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

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.1, 1.1);}
.scale3 {transform: scale(1.1, 1.1);}
.scale4 {transform: scale(1.1, 1.1);}
.scale5 {transform: scale(1.1, 1.1);}
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축 회전을 나타냅니다.
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);}

skew

Porperty Sample Description
skew transform: skew(10deg, 10deg); 선택한 요소의 X축, Y축 기울기를 나타냅니다.
skewX transform: skewX(10deg); 선택한 요소의 X축 기울기를 나타냅니다.
skewY transform: skewY(10deg); 선택한 요소의 Y축 기울기를 나타냅니다.
skewZ transform: skewZ(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% 100%;}
.origin7 {transform: rotate(20deg); transform-origin: 100% 100%;}
.origin8 {transform: rotate(30deg); transform-origin: 100% 100%;}
.origin9 {transform: rotate(40deg); transform-origin: 100% 100%;}
.origin10 {transform: rotate(50deg); transform-origin: 100% 100%;}
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%; }

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