HTML
<p>Awesome loaders from <a href="http://cfoucht.com/loadlab" target="_blank">Load Lab</a></p>
<div class="flexbox">
<!-- NO BORDER SPINNER -->
<div>
<div class="nb-spinner"></div>
</div>
<!-- BORDER TOP SPINNER -->
<div>
<div class="bt-spinner"></div>
</div>
<!-- DOUBLE BORDER SPINNER -->
<div>
<div class="db-spinner"></div>
</div>
<!-- DOUBLE SPINNERS -->
<div>
<div class="dbl-spinner"></div>
<div class="dbl-spinner dbl-spinner--2"></div>
</div>
<!-- SRHINKING SPINNER
<div>
<div class="sh-spinner">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div> -->
<!-- SQUARE SPINNER -->
<div>
<div class="square-spinner"></div>
</div>
<!-- REVERSE SPINNER -->
<div>
<div class="reverse-spinner"></div>
</div>
<div>
<div class="hm-spinner"></div>
</div>
<!-- TRIPLE SPINNER -->
<div>
<div class="triple-spinner"></div>
</div>
<!-- CM spinner -->
<div>
<div class="cm-spinner"></div>
</div>
<!-- MUTLI SPINNER -->
<div>
<div class="multi-spinner-container">
<div class="multi-spinner">
<div class="multi-spinner">
<div class="multi-spinner">
<div class="multi-spinner">
<div class="multi-spinner">
<div class="multi-spinner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 3 DOT LOADER -->
<div>
<div class="dot-loader"></div>
<div class="dot-loader dot-loader--2"></div>
<div class="dot-loader dot-loader--3"></div>
</div>
<!-- FULL CIRCLE LOADER -->
<div>
<div class="circle-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- SPINNER 13 -->
<div>
<div class="ml-loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- MESH LOADER -->
<div>
<div class="mesh-loader">
<div class="set-one">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="set-two">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<!-- HEART LOADER -->
<div>
<div class="heart-loader"></div>
</div>
<!-- <div>
<div class="pacman"></div>
</div> -->
<!-- TRIFORCE LOADER -->
<div>
<div class="triforce-container">
<div class="triforce"></div>
</div>
</div>
</div>
CSS
body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #263238;
height: 100vh;
padding: 0;
margin: 0;
font-family: Arial;
}
.flexbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flexbox > div {
width: 20%;
height: 250px;
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
border: 1px solid rgba(255, 255, 255, 0.1);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
/* NO BORDER SPINNER */
.nb-spinner {
width: 75px;
height: 75px;
margin: 0;
background: transparent;
border-top: 4px solid #03A9F4;
border-right: 4px solid transparent;
border-radius: 50%;
-webkit-animation: 1s spin linear infinite;
animation: 1s spin linear infinite;
}
/* BORDER TOP SPINNER */
.bt-spinner {
width: 75px;
height: 75px;
border-radius: 50%;
background-color: transparent;
border: 4px solid #222;
border-top-color: #03A9F4;
-webkit-animation: 1s spin linear infinite;
animation: 1s spin linear infinite;
}
/* DOUBLE BORDER SPINNER */
.db-spinner {
width: 75px;
height: 75px;
border-radius: 50%;
background-color: transparent;
border: 4px solid #222;
border-top-color: #03A9F4;
border-bottom-color: #03A9F4;
-webkit-animation: 1s spin linear infinite;
animation: 1s spin linear infinite;
}
/* DOUBLE SPINNER */
.double-spinner {
position: relative;
}
.dbl-spinner {
position: absolute;
width: 75px;
height: 75px;
border-radius: 50%;
background-color: transparent;
border: 4px solid transparent;
border-top: 4px solid #222;
border-left: 4px solid #222;
-webkit-animation: 2s spin linear infinite;
animation: 2s spin linear infinite;
}
.dbl-spinner--2 {
border: 4px solid transparent;
border-right: 4px solid #03A9F4;
border-bottom: 4px solid #03A9F4;
-webkit-animation: 1s spin linear infinite;
animation: 1s spin linear infinite;
}
/* Shrinking spinner */
/* .sh-spinner {
position: relative;
height: 100px;
width: 100px;
}
.sh-spinner div {
position: absolute;
width: 75px;
height: 75px;
border-radius: 50%;
background-color: transparent;
border: 4px solid transparent;
border-top: 4px solid #009688;
-webkit-animation: 1.6s spin cubic-bezier(0.43, 1.12, 0.87, 0.84) infinite;
animation: 1.6s spin cubic-bezier(0.43, 1.12, 0.87, 0.84) infinite;
margin: 4px;
}
.sh-spinner div:nth-child(1) {
animation-delay: -0.4s;
}
.sh-spinner div:nth-child(2) {
animation-delay: -0.3s;
}
.sh-spinner div:nth-child(3) {
animation-delay: -0.15s;
} */
/* SQUARE SPINNER */
.square-spinner {
width: 55px;
display: block;
background-color: #03A9F4;
height: 55px;
-webkit-animation: 3s flip ease-in-out infinite;
animation: 3s flip ease-in-out infinite
}
/* TRIPLE SPINNER */
.triple-spinner {
display: block;
position: relative;
width: 125px;
height: 125px;
border-radius: 50%;
border: 4px solid transparent;
border-top: 4px solid #FF5722;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.triple-spinner::before,
.triple-spinner::after {
content: "";
position: absolute;
border-radius: 50%;
border: 4px solid transparent;
}
.triple-spinner::before {
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-top-color: #FF9800;
-webkit-animation: spin 3s linear infinite;
animation: spin 3.5s linear infinite;
}
.triple-spinner::after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #FFC107;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.75s linear infinite;
}
/* REVERSE SPINNER */
.reverse-spinner {
position: relative;
height: 100px;
width: 100px;
border: 4px solid transparent;
border-top-color: #388E3C;
border-left-color: #388E3C;
border-radius: 50%;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
.reverse-spinner::before {
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
content: "";
border: 4px solid transparent;
border-top-color: #66BB6A;
border-left-color: #66BB6A;
border-radius: 50%;
-webkit-animation: spinBack 1s linear infinite;
animation: spinBack 1s linear infinite;
}
/* HM SPINNER */
.hm-spinner{
height: 115px;
width: 115px;
border: 5px solid transparent;
border-top-color: #9C27B0;
border-bottom-color: #9C27B0;
border-radius: 50%;
position: relative;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
.hm-spinner::before{
content: "";
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
border: 5px solid transparent;
border-top-color: #BA68C8;
border-bottom-color: #BA68C8;
border-radius: 50%;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
/* CM SPINNER */
.cm-spinner {
height: 150px;
width: 150px;
border: 3px solid transparent;
border-radius: 50%;
border-top: 4px solid #f15e41;
-webkit-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
position: relative;
}
.cm-spinner::before,
.cm-spinner::after {
content: "";
position: absolute;
top: 6px;
bottom: 6px;
left: 6px;
right: 6px;
border-radius: 50%;
border: 4px solid transparent;
}
.cm-spinner::before {
border-top-color: #bad375;
-webkit-animation: 3s spin linear infinite;
animation: 3s spin linear infinite;
}
.cm-spinner::after {
border-top-color: #26a9e0;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
.spinner-7 {
width: 60px;
height: 60px;
margin: 0;
background: transparent;
border-top: 4px solid #fff;
border-right: 4px solid transparent;
border-radius: 50%;
-webkit-animation: 1s spin linear infinite;
animation: 1s spinBorder linear infinite;
}
/* 3 DOT LOADER */
.dot-loader {
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #03A9F4;
position: relative;
-webkit-animation: 1.2s grow ease-in-out infinite;
animation: 1.2s grow ease-in-out infinite;
}
.dot-loader--2 {
-webkit-animation: 1.2s grow ease-in-out infinite 0.15555s;
animation: 1.2s grow ease-in-out infinite 0.15555s;
margin: 0 20px;
}
.dot-loader--3 {
-webkit-animation: 1.2s grow ease-in-out infinite 0.3s;
animation: 1.2s grow ease-in-out infinite 0.3s;
}
/* CIRCLE DOT LOADER */
.circle-loader {
position: relative;
width: auto;
height: auto;
}
.circle-loader div {
height: 10px;
width: 10px;
background-color: #03A9F4;
border-radius: 50%;
position: absolute;
-webkit-animation: 0.8s opaque ease-in-out infinite both;
animation: 0.8s opaque ease-in-out infinite both;
}
.circle-loader > div:nth-child(1) {
top: -25px;
left: 0;
}
.circle-loader > div:nth-child(2) {
top: -17px;
left: 17px;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.circle-loader > div:nth-child(3) {
top: 0;
left: 25px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.circle-loader > div:nth-child(4) {
top: 17px;
left: 17px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.circle-loader > div:nth-child(5) {
top: 25px;
left: 0;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.circle-loader > div:nth-child(6) {
top: 17px;
left: -17px;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.circle-loader > div:nth-child(7) {
top: 0;
left: -25px;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.circle-loader > div:nth-child(8) {
top: -17px;
left: -17px;
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
/* MULTI SPINNER */
.multi-spinner-container {
width: 150px;
height: 150px;
position: relative;
margin: 30px auto;
overflow: hidden;
}
.multi-spinner {
position: absolute;
width: calc(100% - 9.9px);
height: calc(100% - 9.9px);
border: 5px solid transparent;
border-top-color: #ff5722;
border-radius: 50%;
-webkit-animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.76) infinite;
animation: spin 5s cubic-bezier(0.17, 0.49, 0.96, 0.76) infinite;
}
/* MESH LOADER */
.mesh-loader {
overflow: hidden;
height: inherit;
width: inherit;
}
.mesh-loader .circle {
width: 30px;
height: 30px;
position: absolute;
background: #03A9F4;
border-radius: 50%;
margin: -15px;
-webkit-animation: mesh 3s ease-in-out infinite -1.5s;
animation: mesh 3s ease-in-out infinite -1.5s;
}
.mesh-loader > div .circle:last-child {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.mesh-loader > div {
position: absolute;
top: 50%;
left: 50%;
}
.mesh-loader > div:last-child {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* TRIFORCE LOADER */
.triforce-container {
width: 100px;
height: 100px;
position: relative;
margin: 120px auto;
}
.triforce,
.triforce::before,
.triforce::after {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #ceb502;
position: relative;
-webkit-animation: 3s triforce linear infinite 2s both;
animation: 3s triforce linear infinite 2s both;
top: 50px;
}
.triforce::before,
.triforce::after {
content: "";
position: absolute;
}
.triforce::before {
left: 25px;
top: 0;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.triforce::after {
top: -50px;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
/* HEART LOADER */
.heart-loader {
background-color: #f44336;
width: 50px;
height: 50px;
position: relative;
-webkite-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: pulsate 1s infinite;
animation: pulsate 1s infinite;
}
.heart-loader::before,
.heart-loader::after {
display: inline-block;
content: "";
width: 50px;
height: 50px;
background-color: #f44336;
position: absolute;
border-radius: 50%;
}
.heart-loader::before {
top: 0px;
left: -25px;
}
.heart-loader::after {
top: -25px;
left: -0px;
}
/* PACMAN */
/* .pacman{
height: 75px;
width: 75px;
background-color: gold;
border-radius: 50%;
margin: -37px 0 0 0;
position: relative;
display: block;
overflow: hidden;
}
.pacman::before{
} */
/* SPINNER 13 */
.ml-loader {
position: relative;
width: 70px;
height: 70px;
}
.ml-loader div {
-webkit-transform-origin: 32px 32px;
-ms-transform-origin: 32px 32px;
transform-origin: 32px 32px;
-webkit-animation: 1.2s opaque ease-in-out infinite both;
animation: 1.2s opaque ease-in-out infinite both;
}
.ml-loader div::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 30px;
width: 5px;
height: 18px;
border-radius: 10px;
background-color: #03A9F4;
}
.ml-loader div:nth-child(1) {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
}
.ml-loader div:nth-child(2) {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.ml-loader div:nth-child(3) {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.ml-loader div:nth-child(4) {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.ml-loader div:nth-child(5) {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.ml-loader div:nth-child(6) {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg);
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.ml-loader div:nth-child(7) {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.ml-loader div:nth-child(8) {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg);
-webkit-animation-delay: 0.7s;
animation-delay: 0.7s;
}
.ml-loader div:nth-child(9) {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg);
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.ml-loader div:nth-child(10) {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.ml-loader div:nth-child(11) {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg);
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.ml-loader div:nth-child(12) {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg);
-webkit-animation-delay: 1.1s;
animation-delay: 1.1s;
}
.ml-loader div:nth-child(13) {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
-webkit-@keyframes spin {
-webkit-from {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
-webkit-to {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spinBack {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-720deg);
transform: rotate(-720deg);
}
}
@keyframes spinBack {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-720deg);
transform: rotate(-720deg);
}
}
@-webkit-keyframes spinBorder {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-width: 15px;
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
border-width: 3px;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
border-width: 15px;
}
}
@keyframes spinBorder {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-width: 15px;
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
border-width: 3px;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
border-width: 15px;
}
}
@-webkit-keyframes grow {
0%, 40%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes grow {
0%, 40%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes triforce {
0% {
border-bottom-color: rgb(206, 181, 2);
}
40% {
border-bottom-color: rgba(206, 181, 2, 0);
}
80% {
border-bottom-color: rgb(206, 181, 2);
}
100% {
border-bottom-color: rgb(206, 181, 2);
}
}
@keyframes triforce {
0% {
border-bottom-color: rgb(206, 181, 2);
}
40% {
border-bottom-color: rgba(206, 181, 2, 0);
}
80% {
border-bottom-color: rgb(206, 181, 2);
}
100% {
border-bottom-color: rgb(206, 181, 2);
}
}
@-webkit-keyframes pulsate {
0% {
-webkit-transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
}
5% {
-webkit-transform: rotate(45deg) scale(0.9);
transform: rotate(45deg) scale(0.9);
}
10% {
-webkit-transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
}
15% {
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
50% {
-webkit-transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
}
100% {
-webkit-transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
}
}
@keyframes pulsate {
0% {
-webkit-transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
}
5% {
-webkit-transform: rotate(45deg) scale(0.9);
transform: rotate(45deg) scale(0.9);
}
10% {
-webkit-transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
}
15% {
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
50% {
-webkit-transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
}
100% {
-webkit-transform: rotate(45deg) scale(0.8);
transform: rotate(45deg) scale(0.8);
}
}
@-webkit-keyframes opaque {
0% {
opacity: 0.1;
}
40% {
opacity: 1;
}
80% {
opacity: 0.1;
}
100% {
opacity: 0.1;
}
}
@keyframes opaque {
0% {
opacity: 0.1;
}
40% {
opacity: 1;
}
80% {
opacity: 0.1;
}
100% {
opacity: 0.1;
}
}
@-webkit-keyframes mesh {
0% {
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
50.1% {
-webkit-transform-origin: 50% 200%;
transform-origin: 50% 200%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: 50% 200%;
transform-origin: 50% 200%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes mesh {
0% {
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
-webkit-transform: rotate(0);
transform: rotate(0);
}
50% {
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
50.1% {
-webkit-transform-origin: 50% 200%;
transform-origin: 50% 200%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform-origin: 50% 200%;
transform-origin: 50% 200%;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
25% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg)
}
75% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
transform: perspective(120px) rotateX(0deg) rotateY(-180deg)
}
100% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
transform: perspective(120px) rotateX(0deg) rotateY(-360deg)
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}
25% {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
transform: perspective(120px) rotateX(-180deg) rotateY(0deg)
}
50% {
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg)
}
75% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
transform: perspective(120px) rotateX(0deg) rotateY(-180deg)
}
100% {
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
transform: perspective(120px) rotateX(0deg) rotateY(-360deg)
}
}
@media only screen and (max-width: 968px) {
.flexbox > div {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.3333333%;
flex: 0 0 33.3333333%;
}
}
@media only screen and (max-width: 768px) {
.flexbox > div {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
}
}
@media only screen and (max-width: 568px) {
.flexbox > div {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
}
p{
color: #03A9F4;
display: block;
text-align: center;
font-size: 18px;
margin: 15px auto;
}
a {
text-decoration: none;
cursor: pointer;
color: #03A9F4;
}
{ } JS
Preview