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; 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(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
 .block.sca > div{background-color: #ba68c8; transition: all 0.3s ease-in-out;}
                    .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(0, 0);
                        }
                        50% {
                            transform: scale(1.5, 1.5);
                        }
                        100% {
                            transform: scale(0, 0);
                        }
                    }

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, 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(to top, #D74177, #FFE98A); 
                    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(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(50deg);
                        }
                        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(0deg);
                        }
                        50% {
                           transform: rotate3d(0,1,1,100deg);
                        }
                        100% {
                            transform: rotate3d(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
                  
                  .block.ske > div {
					background:linear-gradient(45deg, #93278F, #00A99D);
					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(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 {transform: skewY(30deg);}
                     .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

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
                 .block.ori > div {
					background:linear-gradient(45deg, #00A8C5,#FFFF7E);
					transition: all 0.3s ease-in-out}
					.block.ori > div:hover {transform: none;}
					.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,0deg); transform-origin:0% 0%;
                        }
                        50% {
                           transform: rotate3d(0,1,0,50deg); transform-origin:0% 0%;
                        }
                        100% {
                           transform: rotate3d(0,1,0,0deg); 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,0deg); transform-origin:0% 0%;
                        }
                        50% {
                           transform: rotate3d(0,1,0,-50deg); transform-origin:0% 0%;
                        }
                        100% {
                           transform: rotate3d(0,1,0,0deg); 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,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,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%;
                        }
                    } 

        

                  
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
sample6
sample7
sample8
sample9
sample10

codepen

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

See the Pen Rotating Cube by GRAY GHOST (@grayghostvisuals) on CodePen.

See the Pen 3D app demo with css transforms by Shven (@Shven) on CodePen.

See the Pen CSS3 2D Transform examples by Elena Nazarova (@nazarelen) on CodePen.

See the Pen CSS3 3D Transform Experiment by Dave Odden (@DaveOdden) on CodePen.