<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
body,
html {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
}
.stage {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-perspective: 800px;
perspective: 800px;
width: 100%;
height: 100%;
background: rgb(69,72,77);
background: -webkit-radial-gradient(center, ellipse, rgb(9,72,77) 0%, rgb(0,0,0) 100%);
background: radial-gradient(ellipse at center, rgb(9,72,77) 0%,rgb(0,0,0) 100%);
}
.text {
position: absolute;
font-family: 'Arial', sans-serif;
color: white;
text-transform: uppercase;
letter-spacing: 10px;
font-size: 20px;
z-index: 100;
text-shadow: 0px 0px 100px rgb(255,72,77),0px 0px 10px white;
}
.circle,
.rotator {
width: 200px;
height: 180px;
border-radius: 50%;
}
.circle {
-webkit-animation: flip infinite;
animation: flip infinite;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-box-shadow: 0px 0px 200px rgba(55,0,250,0.4), rgba(255,0,250,0.4) 0px 0px 75px inset;
box-shadow: 0px 0px 200px rgba(55,0,250,0.4), rgba(255,0,250,0.4) 0px 0px 75px inset;
//border: 10px solid black;
}
.rotator {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
position: absolute;
}
.rotator:nth-child(1) {
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
.rotator:nth-child(1) .circle {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.rotator:nth-child(2) {
-webkit-transform: rotateZ(72deg);
transform: rotateZ(72deg);
}
.rotator:nth-child(2) .circle {
-webkit-animation-delay: 0.48s;
animation-delay: 0.48s;
}
.rotator:nth-child(3) {
-webkit-transform: rotateZ(144deg);
transform: rotateZ(144deg);
}
.rotator:nth-child(3) .circle {
-webkit-animation-delay: 0.96s;
animation-delay: 0.96s;
}
.rotator:nth-child(4) {
-webkit-transform: rotateZ(216deg);
transform: rotateZ(216deg);
}
.rotator:nth-child(4) .circle {
-webkit-animation-delay: 1.44s;
animation-delay: 1.44s;
}
.rotator:nth-child(5) {
-webkit-transform: rotateZ(288deg);
transform: rotateZ(288deg);
}
.rotator:nth-child(5) .circle {
-webkit-animation-delay: 1.92s;
animation-delay: 1.92s;
}
.rotator:nth-child(6) {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.rotator:nth-child(6) .circle {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: rotateX( 0deg );
transform: rotateX( 0deg );
}
100% {
-webkit-transform: rotateX( 360deg );
transform: rotateX( 360deg );
}
}
@keyframes flip {
0% {
-webkit-transform: rotateX( 0deg );
transform: rotateX( 0deg );
}
100% {
-webkit-transform: rotateX( 360deg );
transform: rotateX( 360deg );
}
}
</style>
</head>
<body>
<div class="stage">
<div class="text">
codemo
</div>
<div class="rotator">
<div class="circle"></div>
</div>
<div class="rotator">
<div class="circle"></div>
</div>
<div class="rotator">
<div class="circle"></div>
</div>
<div class="rotator">
<div class="circle"></div>
</div>
<div class="rotator">
<div class="circle"></div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">
body, html {
display:flex;
width: 100%;
height: 100%;
}
.stage {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
perspective: 800px;
width: 100%;
height: 100%;
background: rgb(69,72,77);
background: radial-gradient(ellipse at center, rgb(9,72,77) 0%,rgb(0,0,0) 100%);
}
.text {
position:absolute;
font-family: 'Arial', sans-serif;
color: white;
text-transform: uppercase;
letter-spacing: 10px;
font-size:20px;
z-index:100;
text-shadow: 0px 0px 100px rgb(255,72,77),0px 0px 10px white;
}
.circle, .rotator {
width : 200px;
height: 180px;
border-radius: 50%;
}
.circle {
animation: flip infinite;
animation-duration: 4s;
animation-timing-function: linear;
transform-style: preserve-3d;
transform-origin: center center;
backface-visibility: visible;
box-shadow: 0px 0px 200px rgba(55,0,250,0.4), rgba(255,0,250,0.4) 0px 0px 75px inset;
//border: 10px solid black;
}
.rotator {
transform-style: preserve-3d;
transform-origin: center center;
position:absolute;
}
.rotator:nth-child(1) {
transform: rotateZ(0deg)
}
.rotator:nth-child(1) .circle {
animation-delay:0s;
}
.rotator:nth-child(2) {
transform: rotateZ(72deg)
}
.rotator:nth-child(2) .circle {
animation-delay:0.48s;
}
.rotator:nth-child(3) {
transform: rotateZ(144deg)
}
.rotator:nth-child(3) .circle {
animation-delay:0.96s;
}
.rotator:nth-child(4) {
transform: rotateZ(216deg)
}
.rotator:nth-child(4) .circle {
animation-delay:1.44s;
}
.rotator:nth-child(5) {
transform: rotateZ(288deg)
}
.rotator:nth-child(5) .circle {
animation-delay:1.92s;
}
.rotator:nth-child(6) {
transform: rotateZ(360deg)
}
.rotator:nth-child(6) .circle {
animation-delay:2.4s;
}
@keyframes flip {
0% {
transform:rotateX( 0deg );
}
100% {
transform:rotateX( 360deg );
}
}</script>
</body>
</html>