TRANSFORM

Property 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:translateY(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 {
	animation-name: translate5;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes translate5 {
	0% {transform:  translate(0px, 0px);}
	50% {transform:  translate(50px, 50px);}
	100% {transform:  translate(0px, 0px);}
}
translate6
translate7
translate8
translate9
translate10
.translate6 {transform:  translateX(10px);}
.translate7 {transform:  translateX(20px);}
.translate8 {transform:  translateX(30px);}
.translate9 {transform:  translateX(40px);}
.translate10 {
	animation-name: translate10;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes translate10 {
	0% {transform:  translateX(0px);}
	50% {transform:  translateX(50px);}
	100% {transform:  translateX(0px);}
}
translate11
translate12
translate13
translate14
translate15
.translate11 {transform:  translateY(10px);}
.translate12 {transform:  translateY(20px);}
.translate13 {transform:  translateY(30px);}
.translate14 {transform:  translateY(40px);}
.translate15 {
	animation-name: translate15;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes translate15 {
	0% {transform:  translateY(0px);}
	50% {transform:  translateY(50px);}
	100% {transform:  translateY(0px);}
}

SCALE

Property 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 {	
	animation-name: scale5;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes scale5 {
	0% {transform:  scale(0, 0);}
	50% {transform:  scale(1.5, 1.5);}
	100% {transform:  scale(0, 0);}
}
scale1
scale2
scale3
scale4
scale5
.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 {	
	animation-name: scale10;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes scale10 {
	0% {transform:  scale(0, 0);}
	50% {transform:  scale(0.7, 0.7);}
	100% {transform:  scale(0, 0);}
}
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 {
	animation-name: scale15;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes scale15 {
	0% {transform:  scaleX(0, 0);}
	50% {transform:  scaleX(1.5);}
	100% {transform:  scaleX(0, 0);}
}
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 {
	animation-name: scale20;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes scale20 {
	0% {transform:  scaleY(0, 0);}
	50% {transform:  scaleY(1.5);}
	100% {transform:  scaleY(0, 0);}
}	

Rotate

Property 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 {
	animation-name: rotate5;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes rotate5 {
	0% {transform:   rotate(0deg, 0deg);}
	50% {transform:   rotate(50deg);}
	100% {transform:   rotate(0deg, 0deg);}
}
rotate6
rotate7
rotate8
rotate9
rotate10
.rotate6 {transform:  rotateX(10deg);}
.rotate7 {transform:  rotateX(20deg);}
.rotate8 {transform:  rotateX(30deg);}
.rotate9 {transform:  rotateX(40deg);}
.rotate10 {
	animation-name: rotate10;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes rotate10 {
	0% {transform:   rotateX(0deg, 0deg);}
	50% {transform:   rotateX(50deg);}
	100% {transform:   rotateX(0deg, 0deg);}
}
rotate11
rotate12
rotate13
rotate14
rotate15
.rotate11 {transform:  rotateY(10deg);}
.rotate12 {transform:  rotateY(20deg);}
.rotate13 {transform:  rotateY(30deg);}
.rotate14 {transform:  rotateY(40deg);}
.rotate15 {
	animation-name: rotate15;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes rotate15 {
	0% {transform:   rotateY(0deg, 0deg);}
	50% {transform:   rotateY(50deg);}
	100% {transform:   rotateY(0deg, 0deg);}
}
rotate16
rotate17
rotate18
rotate19
rotate20
.rotate16 {transform:  rotateZ(10deg);}
.rotate17 {transform:  rotateZ(20deg);}
.rotate18 {transform:  rotateZ(30deg);}
.rotate19 {transform:  rotateZ(40deg);}
.rotate20 {
	animation-name: rotate20;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes rotate20 {
	0% {transform:   rotateZ(0deg, 0deg);}
	50% {transform:   rotateZ(50deg);}
	100% {transform:   rotateZ(0deg, 0deg);}
}
rotate21
rotate22
rotate23
rotate24
rotate25
rotate26
rotate27
rotate28
rotate29
rotate30
.rotate21 {transform: rotate3d(0,1,1,10deg);}
.rotate22 {transform: rotate3d(0,1,1,20deg);}
.rotate23 {transform: rotate3d(0,1,1,30deg);}
.rotate24 {transform: rotate3d(0,1,1,40deg);}
.rotate25 {transform: rotate3d(0,1,1,50deg);}
.rotate26 {transform: rotate3d(0,1,1,60deg);}
.rotate27 {transform: rotate3d(0,1,1,70deg);}
.rotate28 {transform: rotate3d(0,1,1,80deg);}
.rotate29 {transform: rotate3d(0,1,1,90deg);}
.rotate30 {
	animation-name: rotate30;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes rotate30 {
	0% {transform: rotate3d(0,1,1,0deg);}
	50% {transform: rotate3d(0,1,1,100deg);}
	100% {transform: rotate3d(0,1,1,0deg);}
}

Skew

Property Sample Description
skew transform:skew(10deg,10deg); 선택한 요소의 X축, Y축 기울기를 나타냅니다.
skewX transform:X(10deg); 선택한 요소의 X축 기울기를 나타냅니다.
skewY transform:skewY(10deg); 선택한 요소의 Y축 기울기를 나타냅니다.
skew1
skew2
skew3
skew4
skew5
.skew1 {transform: skew(10deg, 10deg);}
.skew2 {transform: skew(15deg, 15deg);}
.skew3 {transform: skew(20deg, 20deg);}
.skew4 {transform: skew(25deg, 25deg);}
.skew5 {
	animation-name: skew5;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
	}
	@keyframes skew5 {
	0% {transform: skew(0deg,0deg);}
	50% {transform: skew(30deg,30deg);}
	100% {transform: skew(0deg,0deg);}
	}
skew6
skew7
skew8
skew9
skew10
.skew6 {transform: skewX(10deg);}
.skew7 {transform: skewX(15deg);}
.skew8 {transform: skewX(20deg);}
.skew9 {transform: skewX(25deg);}
.skew10 {
	animation-name: skew10;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes skew10 {
	0% {transform: skewX(0deg);}
	50% {transform: skewX(30deg);}
	100% {transform: skewX(0deg);}
}
skew11
skew12
skew13
skew14
skew15
.skew11 {transform: skewY(10deg);}
.skew12 {transform: skewY(15deg);}
.skew13 {transform: skewY(20deg);}
.skew14 {transform: skewY(25deg);}
.skew15 {
	animation-name: skew15;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes skew15 {
	0% {transform: skewY(0deg);}
	50% {transform: skewY(30deg);}
	100% {transform: skewY(0deg);}
}

transform-origin

Property 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
origin6
origin7
origin8
origin9
origin10
.origin1 {transform: rotate(10deg); transform-origin: 0% 0%;}
.origin2 {transform: rotate(15deg); transform-origin: 0% 0%;}
.origin3 {transform: rotate(20deg); transform-origin: 0% 0%;}
.origin4 {transform: rotate(25deg); transform-origin: 0% 0%;}
.origin5 {
	animation-name: origin5;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes origin5 {
	0% {transform: rotate(0deg); transform-origin: 0% 0%;}
	50% {transform: rotate(30deg); transform-origin: 0% 0%;}
	100% {transform: rotate(0deg); transform-origin: 0% 0%;}
}

.origin6 {transform: rotate(10deg); transform-origin: 100% 100%;}
.origin7 {transform: rotate(15deg); transform-origin: 100% 100%;}
.origin8 {transform: rotate(20deg); transform-origin: 100% 100%;}
.origin9 {transform: rotate(25deg); transform-origin: 100% 100%;}
.origin10 {
	animation-name: origin10;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes origin10 {
	0% {transform: rotate(0deg); transform-origin: 100% 100%;}
	50% {transform: rotate(30deg); transform-origin: 100% 100%;}
	100% {transform: rotate(0deg); transform-origin: 100% 100%;}
}
origin11
origin12
origin13
origin14
origin15
origin16
origin17
origin18
origin19
origin20
.origin11 {transform: rotate3d(0,1,0,10deg); transform-origin: 0% 0%;}
.origin12 {transform: rotate3d(0,1,0,20deg); transform-origin: 0% 0%;}
.origin13 {transform: rotate3d(0,1,0,30deg); transform-origin: 0% 0%;}
.origin14 {transform: rotate3d(0,1,0,40deg); transform-origin: 0% 0%;}
.origin15 {
	animation-name: origin15;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes origin15 {
	0% {transform: rotate3d(0,1,0,10deg); transform-origin: 0% 0%;}
	50% {transform: rotate3d(0,1,0,50deg); transform-origin: 0% 0%;}
	100% {transform: rotate3d(0,1,0,10deg); transform-origin: 0% 0%;}
}

.origin16 {transform: rotate3d(0,1,0,-10deg); transform-origin: 0% 0%;}
.origin17 {transform: rotate3d(0,1,0,-20deg); transform-origin: 0% 0%;}
.origin18 {transform: rotate3d(0,1,0,-30deg); transform-origin: 0% 0%;}
.origin19 {transform: rotate3d(0,1,0,-40deg); transform-origin: 0% 0%;}
.origin20 {
	animation-name: origin20;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
origin21
origin22
origin23
origin24
origin25
origin26
origin27
origin28
origin29
origin30
.origin21 {transform: rotate3d(0,1,0,10deg); transform-origin: 100% 100%;}
.origin22 {transform: rotate3d(0,1,0,20deg); transform-origin: 100% 100%;}
.origin23 {transform: rotate3d(0,1,0,30deg); transform-origin: 100% 100%;}
.origin24 {transform: rotate3d(0,1,0,40deg); transform-origin: 100% 100%;}
.origin25 {
	animation-name: origin25;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes origin25 {
	0% {transform: rotate3d(0,1,0,0deg); transform-origin: 100% 100%;}
	50% {transform: rotate3d(0,1,0,50deg); transform-origin: 100% 100%;}
	100% {transform: rotate3d(0,1,0,0deg); transform-origin: 100% 100%;}
}

.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 {
	animation-name: origin30;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes origin30 {
	0% {transform: rotate3d(0,1,0,-10deg); transform-origin: 100% 100%;}
	50% {transform: rotate3d(0,1,0,-50deg); transform-origin: 100% 100%;}
	100% {transform: rotate3d(0,1,0,-10deg); transform-origin: 100% 100%;}
}
origin31
origin32
origin33
origin34
origin35
origin36
origin37
origin38
origin39
origin40
.origin31 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 0%;}
.origin32 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 25%;}
.origin33 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 50%;}
.origin34 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 75%;}
.origin35 {
	animation-name: origin35;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes origin35 {
	0% {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 0%;}
	50% {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 100%;}
	100% {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 0%;}
}

.origin36 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 0%;}
.origin37 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 25%;}
.origin38 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 50%;}
.origin39 {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 75%;}
.origin40 {
	animation-name: origin40;
	animation-duration: 1s;
	animation-iteration-count: 100;
	animation-timing-function: ease-in-out;
}
@keyframes origin40 {
	0% {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 0%;}
	50% {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 100%;}
	100% {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 0%;}
}
sample1
sample2
sample3
sample4
sample5

See the Pen CSS transforms by Patrick Brosset (@captainbrosset) on CodePen.

See the Pen How the skew transform works by Ana Tudor (@thebabydino) on CodePen.

See the Pen CSS Transform by Sten Hougaard (@netsi1964) on CodePen.

See the Pen CSS 2D Transform Matrix Generator by William Hsu (@Tinricon) on CodePen.

See the Pen CSS image filters and transformations by Patrick Taylor (@01taylop) on CodePen.