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
.block {
	width: 140px; height: 140px; margin: 40px; font-size: 18px; line-height: 140px; 
	color: #fff; cursor: pointer; text-align: center; float: left; border: 1px solid #ccc;
	}   
.block.late1>div {background-color: #f06292;}
.block.late1>div {transition: all 0.3s ease-in-out;;}
.block.late1>div:hover {transform: none;}
.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(40px, 40px);}
  100% {transform: translate(0px, 0px);}
	}
translate6
translate7
translate8
translate9
translate10
.block.late1>div {background-color: #f06292;}
.block.late1>div {transition: all 0.3s ease-in-out;;}
.block.late1>div:hover {transform: none;}
.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 translate5 {
     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
	.block.sca>div {background-color: #ba68c8; transition: all 0.3s ease-in-out; opacity: 0.8;}
	.block.sca>div:hover {transform: none;}
	.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.4, 1.4);}
	  50% {transform:  scale(1, 1)}
	  100%  {transform:scale(1.4, 1.4)}
		}
	
scale6
scale7
scale8
scale9
scale10
	.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.6, 0.6);}
	  50% {transform:  scale(1, 1)}
	   100%  {transform:scale(0.6, 0.6)}
		}
	
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.4)}
	  100%  {transform:scaleY(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.4)}
	  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(to top, #8E78FF,#FC7D7B);
	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(40deg);}
  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(40deg);}
  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(40deg);}
  100%  {transform: rotateY(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);}
  50% {transform: rotateZ(40deg);}
  100%  {transform: rotateZ(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,10deg)}
      50% {transform: rotate3d(0,1,1,90deg);}
      100% {transform: rotate3d(0,1,1,10deg);}
    }
    

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
.block.ske>div {
	background:linear-gradient(to top, #D74177, #FFE98A);
	transition: all 0.3s ease-in-out}
.block.ske>div:hover {transform: none;}
.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(0deg); transform-origin: 0% 0%;}
      50% {transform: rotate(40deg); 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% 0%;}
      35% {transform: rotate(40deg); transform-origin: 0% 0%;}
	70%   {transform: rotate(40deg); transform-origin: 100% 100%;}
      100% {transform: rotate(0deg); transform-origin: 0% 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,0deg); transform-origin: 0% 0%;}
    	50%   {transform: rotate3d(0,1,0,50deg); transform-origin: 0% 0%;}
      100% {transform: rotate3d(0,1,0,80deg); 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,-80deg); 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,0deg); transform-origin: 100% 100%;}
    	50%   {transform: rotate3d(0,1,0,50deg); transform-origin: 100% 100%;}
      100% {transform: rotate3d(0,1,0,80deg); 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,-80deg); 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% 50%;}
    100% {transform: rotate3d(1,0,0,60deg); transform-origin: 20% 100%;}
       }


.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% 50%;}
    100% {transform: rotate3d(1,0,0,-60deg); transform-origin: 20% 100%;}
       }
sample1
sample2
sample3
sample4
sample5
.block.sam {border:0;}
.block.sam>div {
	background:linear-gradient(135deg, #ed1c24, #fcee21);
	transition: all 0.3s ease-in-out;
}
.block.sam>div:hover {transform: none;}
.sample1 {animation: sample1 5s ease 100;}
.sample2 {animation: sample1 5s ease 100 0.2s;}
.sample3 {animation: sample1 5s ease 100 0.4s;}
.sample4 {animation: sample1 5s ease 100 0.6s;}
.sample5 {animation: sample1 5s ease 100 0.8s;}



@keyframes sample1 {
	0%     {
		background:linear-gradient(135deg, #ed1c24, #fcee21);
		border-radius: 0;
		transform: rotateY(0deg) skewY(0deg);
	}
	10%   {	}
	20%   {
		background:linear-gradient(135deg, #B066FE, #63E2FF);
	}
	30%   {}
	40%   {}
	50%   {
		background:linear-gradient(135deg, #8E78FF, #FC7D7B);
		border-radius: 50%;
		transform: rotateY(500deg) skewY(20deg);
	}
	60%   {	}
	70%   { transform: skewY(0deg)
		
	}
	80%   {			}
	90%   { transform: skewY(-20deg)	}
	100% {
		background:linear-gradient(135deg, #ed1c24, #fcee21);
		border-radius: 0;
		transform: rotateY(0deg) skewY(0deg);
	}
}
sample6
sample7
sample8
sample9
sample10

See the Pen Peeled Text Transforms by Michiel Bijl (@Michiel) on CodePen.

See the Pen Trying to recreate Gamecube opening in CSS by Mauricio Allende (@mallendeo) on CodePen.

See the Pen Pure CSS Progress by Rafael González (@rgg) on CodePen.

See the Pen Equations for Organic Motion by Justin Windle (@soulwire) on CodePen.

See the Pen CSS only 3d Macbook Air by Burak Can (@neoberg) on CodePen.