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좌표 이동을 나타냅니다.

.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 { transform: translateX(10px); }
.translate07 { transform: translateX(20px); }
.translate08 { transform: translateX(30px); }
.translate09 { 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); opacity: .6; }
.translate17 { transform: translateZ(30px); opacity: .6; }
.translate18 { transform: translateZ(50px); opacity: .6; }
.translate19 { transform: translateZ(70px); opacity: .6; }
.translate20 { transform: translateZ(90px); opacity: .6; }

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

.scale06 {transform: scaleX(1.1);}
.scale07 {transform: scaleX(1.2);}
.scale08 {transform: scaleX(1.3);}
.scale09 {transform: scaleX(1.4);}
.scale10 {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축 회전을 나타냅니다.

.rotate01 { transform: rotate(10deg); }
.rotate02 { transform: rotate(20deg); }
.rotate03 { transform: rotate(30deg); }
.rotate04 { transform: rotate(40deg); }
.rotate05 { animation: rotate05 2s infinite }
@keyframes rotate05 {
0% { transform: rotate(0deg);}
50% { transform: rotate(50deg);}
100% { transform: rotate(0deg);}
}

.rotate06 { transform: rotateX(10deg); }
.rotate07 { transform: rotateX(20deg); }
.rotate08 { transform: rotateX(30deg); }
.rotate09 { transform: rotateX(40deg); }
.rotate10 { transform: rotateX(50deg); animation: rotate10 2s infinite}
@keyframes rotate10 {
0% { transform: rotateX(0deg);}
50% { transform: rotateX(750deg);}
100% { transform: rotateX(0deg);}
}

.rotate11 { transform: rotateY(10deg); }
.rotate12 { transform: rotateY(20deg); }
.rotate13 { transform: rotateY(30deg); }
.rotate14 { transform: rotateY(40deg); }
.rotate15 { transform: rotateY(50deg); animation: rotate15 2s infinite }
@keyframes rotate15 {
0% { transform: rotateY(0deg);}
50% { transform: rotateY(50deg);}
100% { transform: rotateY(0deg);}
}

.rotate16 { transform: rotateZ(10deg); }
.rotate17 { transform: rotateZ(20deg); }
.rotate18 { transform: rotateZ(30deg); }
.rotate19 { transform: rotateZ(40deg); }
.rotate20 { transform: rotateZ(50deg); animation: rotate15 2s infinite }
@keyframes rotate20 {
0% { transform: rotateZ(0deg);}
50% { transform: rotateZ(50deg);}
100% { transform: rotateZ(0deg);}
}

.rotate21 { transform: rotate3d(0,1,1,10deg); }
.rotate22 { transform: rotate3d(0,1,1,30deg); }
.rotate23 { transform: rotate3d(0,1,1,40deg); }
.rotate24 { transform: rotate3d(0,1,1,70deg); }
.rotate25 { transform: rotate3d(0,1,1,90deg); animation: rotate25 2s infinite }
@keyframes rotate25 {
0% { transform: rotate3d(0,1,1,10deg);}
50% { transform: rotate3d(0,1,1,90deg);}
100% { transform: rotate3d(0,1,1,10deg);}
}

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 { 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 { transform: skewX(10deg); }
.skew07 { transform: skewX(20deg); }
.skew08 { transform: skewX(30deg); }
.skew09 { 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

.transform1 { transform: scale(1.1) translate(10px) skewY(30deg) rotate3d(0,1,1,30deg); }
.transform2 { transform: scale(0.5) translate(80px) skewX(10deg) rotate3d(2,2,2,50deg); }
.transform3 { transform: scale(0.6) translate(10px) skew(-50deg) rotate3d(5,5,5,5deg); }
.transform4 { transform: scale(0.6) translate(10px) skewX(50deg) rotate3d(-50,-50,-50,-50deg); }
.transform5 { transform: scale(1.1) translate(0px) skewY(-10deg) rotate3d(0,0,0,0deg); }

transform Animation

.transform6 { animation: transform6 3s 10 ease; }
@keyframes transform6 {
0% { background: #4facfe; border-radius: 100%; transform: scale(1) }
20% { background: #4facfe;  border-radius: 100%; transform: scale(.5) }
40% { background: #ffb199;  border-radius: 100%; transform: scale(1) }
60% { background: #ffb199;  border-radius: 20%; transform: scale(1.5) }
80% { background: #4facfe;  border-radius: 100%; transform: scale(.5) }
100% { background: #4facfe;  border-radius: 100%; transform: scale(1) }
}
.transform7 { animation: transform7 5s 10 ease; }
@keyframes transform7 {
0% { background: #fee140; width: 140px; border-radius: 50%; transform: rotateY(0deg) }
40% { background: #4facfe; width: 100px; border-radius: 50%; transform: rotateY(800deg) }
60% { background: #fee140; width: 180px; border-radius: 50%; transform: rotateY(500deg) }
100% { background: #30cfd0; width: 140px; border-radius: 50%; transform: rotateY(0deg) }
}
.transform8 { animation: transform8 5s 10 ease; }
.An3 > div {
background-image: radial-gradient(#84ffff 20%, #18ffff 20% 40%, #00e5ff 40% 60%, #00b8d4 60% 80%, #0091ea 80%);
border-radius: 50%;
}
@keyframes transform8 {
0% { transform: skewX(0deg) rotate3d(0,0,0,0deg); }
50% { transform: skewX(20deg) rotate3d(1,1,1,600deg); }
100% { transform: skewX(0deg) rotate3d(0,0,0,0deg); }
}
.transform9 { animation: transform9 5s 10 ease; }
.An4 > div {
border-radius: 50%;
}
@keyframes transform9 {
0% { background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
}
30% { background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
transform: translate(0,-50px) scale(1.2)}
50% { background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
transform: translate(0,50px) scale(1); border-radius: }
70% { background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
transform: translate(0,-50px) scale(1.2)}
100% { background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
transform: translate(0,50px) scale(1)}
}
.transform10 { animation: transform10 2s 1 ease; }
.An5 > div {
background: #ffc107;
border-radius: 50%; }
@keyframes transform10 {
0% { transform: translate(-100px, -400px) }
5% { transform: translate(0, 0px) }
10% { transform: translate(100px, -300px) }
15% { transform: translate(0, 0px) }
20% { transform: translate(-70px, -250px) }
25% { transform: translate(0, 0px) }
30% { transform: translate(30px, -200px) }
35% { transform: translate(0, 0px) }
40% { transform: translate(-30px, -150px) }
45% { transform: translate(0, 0px) }
50% { transform: translate(25px, -100px) }
55% { transform: translate(0, 0px) }
60% { transform: translate(-15px, -85px) }
65% { transform: translate(0, 0px) }
70% { transform: translate(10px, -60px) }
75% { transform: translate(0, 0px) }
80% { transform: translate(0, -55px) }
85% { transform: translate(0, 0px) }
90% { transform: translate(0, -50px) }
100% { transform: translate(0, 0) }