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 {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 {transform: translateX(10px);}
.translate7 {transform: translateX(20px);}
.translate8 {transform: translateX(30px);}
.translate9 {transform: translateX(40px);}
.translate10 {transform: translateX(50px);}

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

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

.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 {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 {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 {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 {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 {transform: rotate(10deg);}
.rotate2 {transform: rotate(20deg);}
.rotate3 {transform: rotate(30deg);}
.rotate4 {transform: rotate(40deg);}
.rotate5 {transform: rotate(50deg);}

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

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

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

.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 {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 {transform: skewX(10deg);}
.skew7 {transform: skewX(20deg);}
.skew8 {transform: skewX(30deg);}
.skew9 {transform: skewX(40deg);}
.skew10 {transform: skewX(50deg);}

.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 {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 {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 {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 {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 {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 {transform: rotate3d(0,1,0,20deg); transform-origin: 100% 100%;}
.origin27 {transform: rotate3d(0,1,0,30deg); transform-origin: 100% 100%;}
.origin28 {transform: rotate3d(0,1,0,40deg); transform-origin: 100% 100%;}
.origin29 {transform: rotate3d(0,1,0,50deg); transform-origin: 100% 100%;}
.origin30 {transform: rotate3d(0,1,0,60deg); transform-origin: 100% 100%;}

.origin31 {transform: rotate3d(0,1,0,-20deg); transform-origin: 100% 100%;}
.origin32 {transform: rotate3d(0,1,0,-30deg); transform-origin: 100% 100%;}
.origin33 {transform: rotate3d(0,1,0,-40deg); transform-origin: 100% 100%;}
.origin34 {transform: rotate3d(0,1,0,-50deg); transform-origin: 100% 100%;}
.origin35 {transform: rotate3d(0,1,0,-60deg); transform-origin: 100% 100%;}

.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 {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 {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.