TRANSFORM

Translate

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(1,1);}
	50% {transform:  scale(1.5,1.5);}
	100% {transform:  scale(1,1);}
}
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.5,0.5);}
	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(1);}
	50% {transform:  scaleX(1.5);}
	100% {transform:  scaleX(1);}
}
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(1);}
	50% {transform:  scaleY(1.5);}
	100% {transform:  scaleY(1);}
}

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
.block.rot > div {
	background:linear-gradient(45deg, #fff3e0, #e65100);
	transition: all 0.3s ease-in-out;}
.block.rot > div:hover {transform: none;}
.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);}
	50% {transform:  rotate(50deg);}
	100% {transform:  rotate(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);}
	50% {transform:  rotateX(50deg);}
	100% {transform:  rotateX(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);}
	50% {transform:  rotateY(50deg);}
	100% {transform:  rotateY(10deg);}
}
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);}
	50% {transform:  rotateZ(50deg);}
	100% {transform:  rotateZ(00deg);}
}
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(10deg, 10deg);}
  50% {transform: skew(25deg, 25deg);}
  100% {transform: skew(10deg, 10deg);}
     }
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(10deg);}
  50% {transform: skewX(25deg);}
  100% {transform: skewX(10deg);}
     }
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(10deg);}
50% {transform: skewY(25deg);}
100% {transform: skewY(10deg);}
 }

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(10deg); transform-origin: 0% 0%;}
50% {transform: rotate(30deg); transform-origin: 0% 0%;}
100% {transform: rotate(10deg); 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;
}
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;
}
@keyframes origin20 {
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%;}
 }
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,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%;}
 }

.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 {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 100%;}
.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
sample6
sample7
sample8
sample9
sample10

codepen

See the Pen Social swatchbook by Hugo Giraudel (@HugoGiraudel) on CodePen.

See the Pen 3D Carousel Using TweenMax.js & jQuery by John Blazek (@johnblazek) on CodePen.

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

See the Pen CSS responsive grid of hexagons by web-tiki (@web-tiki) on CodePen.

See the Pen Spread by Mathias Paumgarten (@MathiasPaumgarten) on CodePen.