| 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좌표 이동을 나타냅니다. |
.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: #f4ff81;transition: all 0.3s ease-in-out}
.block.late1 > div:hover {transform: none;}
.translate1 {transform: translate(10px, 20px);}
.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 {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: translate(0px, 0px);}
50% {transform: translateX(50px);}
100% {transform: translate(0px, 0px);}
}
.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: translate(0px, 0px);}
50% {transform: translateY(50px);}
100% {transform: translate(0px, 0px);}
}
| 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축 확대를 나타냅니다. |
.block.sca >div {background-color: #999; 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(0px, 0px);}
50% {transform: scale(1.5,1.5);}
100% {transform: scale(0px, 0px);}
}
.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(0px, 0px);}
50% {transform: scale(0.5,0.5);}
100% {transform: scale(0px, 0px);}
}
.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: scale(0px, 0px);}
50% {transform: scaleX(1.5);}
100% {transform: scale(0px, 0px);}
}
.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: scale(0px, 0px);}
50% {transform: scaleY(1.5);}
100% {transform: scale(0px, 0px);}
}
| 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축 회전을 나타냅니다. |
.block.rot >div {
background: linear-gradient(to top, #009688,#f4ff81); 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(0px, 0px);}
50% { transform: rotate(50deg); }
100% {transform: rotate(0px, 0px);}
}
.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: rotate(0px, 0px);}
50% { transform: rotateX(50deg); }
100% {transform: rotate(0px, 0px);}
}
.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: rotate(0px, 0px);}
50% { transform: rotateY(50deg); }
100% {transform: rotate(0px, 0px);}
}
.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: rotate(0px, 0px);}
50% { transform: rotateZ(50deg); }
100% {transform: rotate(0px, 0px);}
}
.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);}
}
| Property | Sample | Description |
|---|---|---|
| skew | transform:skew(10deg,10deg); | 선택한 요소의 X축, Y축 기울기를 나타냅니다. |
| skewX | transform:X(10deg); | 선택한 요소의 X축 기울기를 나타냅니다. |
| skewY | transform:skewY(10deg); | 선택한 요소의 Y축 기울기를 나타냅니다. |
.block.ske >div {
background: linear-gradient(to top, #e1bee7,#ec407a); 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 {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, 0deg);}
50% {transform: skewX(30deg);}
100% {transform: skewX(0deg, 0deg);}
}
.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, 0deg);}
50% {transform: skewY(30deg);}
100% {transform: skewY(0deg, 0deg);}
}
| 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 요소 뒷면의 배경 유무를 설정합니다. |
.block.ori >div { background: linear-gradient(to top, #e53935,#9fa8da); 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{ 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 {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 {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%;}
}
.block.sam > div {
background:linear-gradient(135deg, #7986cb, #b39ddb);
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;}
.sample1 {
animation-name: sample1 5s ease 100;
animation-duration: 5s;
animation-timing-function: 100;
animation-timing-function: ease;
}
@keyframes sample1 {
0% {
background:linear-gradient(135deg, #7986cb, #b39ddb);
border-radius: 0;
transform: rotateY(0deg) skewY(0deg);
}
10% {
background:linear-gradient(135deg,#7986cb, #b39ddb);
}
20% {
background:linear-gradient(135deg, #7986cb, #b39ddb);
}
30% {
background:linear-gradient(135deg, #D74177, #FFE98A);
}
40% {
background:linear-gradient(135deg, #7986cb, #b39ddb);
}
50% {
background:linear-gradient(135deg, #7986cb, #80deea);
border-radius: 50%;
transform: rotateY(700deg)skewY(50deg);
}
60% {
background:linear-gradient(135deg, #7986cb, #b39ddb);
}
70% {
background:linear-gradient(135deg, #7986cb, #b39ddb);
}
80% {
background:linear-gradient(135deg, #00A99D, #93278F);
}
90% {
background:linear-gradient(135deg, #7986cb, #b39ddb);
}
100% {
background:linear-gradient(135deg, #7986cb, #b39ddb);
border-radius: 0;
transform: rotateY(0deg) skewY(0deg);
}
}
See the Pen Animating transform-origin by Dan Wilson (@danwilson) on CodePen.
See the Pen Blur & Transform Text by Eric Grucza (@egrucza) on CodePen.
See the Pen CSS3 Transform Loader - squareception by Les (@lesbaa) on CodePen.
See the Pen svg transform-origin - firefox working by Jonathan Marzullo (@jonathan) on CodePen.
See the Pen Trying to recreate Gamecube opening in CSS by Mauricio Allende (@mallendeo) on CodePen.