Transform

Transfrom

변환은 엘리먼트의 좌표를 조작하여 위치나, 크기, 회전 각도 등을 변경하는 기법입니다. 변환함수는 이동(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좌표 이동을 나타냅니다.
translate01
translate02
translate03
translate04
translate05
.translate01 {transform: translate(10px, 10px);}
.translate02 {transform: translate(20px, 20px);}
.translate03 {transform: translate(30px, 30px);}
.translate04 {transform: translate(40px, 40px);}
.translate05 {transform: translate(50px, 50px);}
translate06
translate07
translate08
translate09
translate10
.translate06 {transform: translateX(10px);}
.translate07 {transform: translateX(20px);}
.translate08 {transform: translateX(30px);}
.translate09 {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); opacity: .6;}
.translate22 {transform: translateZ(-30px); opacity: .6;}
.translate23 {transform: translateZ(-50px); opacity: .6;}
.translate24 {transform: translateZ(-70px); opacity: .6;}
.translate25 {transform: translateZ(-90px); opacity: .6;}


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축 확대를 나타냅니다.
scale01
scale02
scale03
scale04
scale05
.scale01 {transform: scale(1.1, 1.1);}
.scale02 {transform: scale(1.2, 1.2);}
.scale03 {transform: scale(1.3, 1.3);}
.scale04 {transform: scale(1.4, 1.4);}
.scale05 {transform: scale(1.5, 1.5);}
scale06
scale07
scale08
scale09
scale10
.scale06 {transform: scale(0.9, 0.9);}
.scale07 {transform: scale(0.8, 0.8);}
.scale08 {transform: scale(0.7, 0.7);}
.scale09 {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축 회전을 나타냅니다.
rotate01
rotate02
rotate03
rotate04
rotate05
.rotate01 {transform: rotate(10deg);}
.rotate02 {transform: rotate(20deg);}
.rotate03 {transform: rotate(30deg);}
.rotate04 {transform: rotate(40deg);}
.rotate05 {transform: rotate(50deg);}
rotate06
rotate07
rotate08
rotate09
rotate10
.rotate06 {transform: rotateX(10deg);}
.rotate07 {transform: rotateX(20deg);}
.rotate08 {transform: rotateX(30deg);}
.rotate09 {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축 기울기를 나타냅니다.
rotateZ transform: rotateZ(10deg); 선택한 요소의 Z축 회전을 나타냅니다.
skew01
skew02
skew03
skew04
skew05
.skew01 {transform: skew(10deg, 10deg)}
.skew02 {transform: skew(20deg, 20deg)}
.skew03 {transform: skew(30deg, 30deg)}
.skew04 {transform: skew(40deg, 40deg)}
.skew05 {transform: skew(50deg, 50deg)}
skew06
skew07
skew08
skew09
skew10
.skew06 {transform: skewX(10deg)}
.skew07 {transform: skewX(20deg)}
.skew08 {transform: skewX(30deg)}
.skew09 {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(1,0,0,-60deg); transform-origin: 20% 0%;}
.origin27 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 25%; }
.origin28 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 50%; }
.origin29 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 75%; }
.origin30 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 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

transform1
transform2
transform3
transform4
transform5
.transform1 {transform: scale(1.1) translateY(20px) skewY(30deg) rotate3d(0,1,1,30deg);}
.transform2 {transform: scaleX(1.1) translate(10px) skewX(30deg) rotate3d(1,1,1,110deg);}
.transform3 {transform: scaleY(0.8) translateY(10px) skewY(30deg) rotate3d(0,1,1,60deg);}
.transform4 {transform: scale(1.1) translate(10px) skew(10deg) rotate3d(0,1,1,30deg);}
.transform5 {transform: scale(0.7) translateZ(40px) skewX(30deg) rotate3d(1,1,0,30deg);}


Transform Animation

transform06
transform07
transform08
transform09
transform10


Sample

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


Sample

See the Pen Transform Origin Examples by Krystal Campioni (@krystalcampioni) on CodePen.