Chandrayan 3 Mission Special :Animation
<!--
Creator : Devansh Mishra
-->
<!doctype html>
<html>
<head>
<style>
.full {
animation: full 2s linear 40s 1;
animation-fill-mode: forwards;
}
@keyframes full {
100% {
opacity: 0
}
}
h2 {
font-size: 30px;
color: mediumseagreen;
font-family: tahoma;
opacity: 0;
animation: ro 2s linear 50s 1;
animation-fill-mode: forwards;
text-align: center;
z-index: 10;
}
.rover {
width: 400px;
height: 480px;
position: absolute;
background-image: linear-gradient(to top, #eee2e2 0, #e3c09d 15%, #2f2f3a 90%);
margin: auto;
top: -500px;
left: 0;
bottom: 0;
right: 0;
animation: ro 2s linear 45s 1;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes ro {
100% {
opacity: 1
}
}
@keyframes rover {
50% {
top: 10px
}
}
.land {
background-image: linear-gradient(to top, #dd6345, #e39776, #dbc2c2);
width: 100%;
height: 300px;
position: absolute;
top: 480px;
}
.structure {
width: 100%;
height: 200px;
}
.rover_body {
width: 200px;
height: 100px;
background: #D5D9DE;
position: absolute;
top: 20px;
left: 70px;
border-radius: 0 0 20px 20px;
animation: rover 4s linear -1s infinite;
}
.line1 {
width: 100%;
height: 20px;
background: #B6B8BE;
position: absolute;
top: 20px
}
.line2 {
width: 100%;
height: 20px;
background: #B6B8BE;
position: absolute;
top: 60px
}
.ver1 {
width: 10px;
height: 45px;
background: #888693;
z-index: 1;
position: absolute;
border-radius: 10px;
top: -20px;
left: 130px
}
.ver2 {
width: 10px;
height: 45px;
background: #888693;
z-index: 1;
position: absolute;
border-radius: 10px;
top: -20px;
left: 150px
}
.ver3 {
width: 10px;
height: 45px;
background: #888693;
z-index: 1;
position: absolute;
border-radius: 10px;
top: -20px;
left: 170px
}
.head_rover {
width: 10px;
height: 90px;
background: #888693;
position: absolute;
left: 220px;
top: -50px;
border-radius: 10px 0 10px 0;
}
.head_rover::before {
content: "";
width: 30px;
height: 10px;
background: #888693;
position: absolute;
border-radius: 10px 0 10px 0;
}
.head_rover::after {
content: "";
width: 30px;
height: 10px;
background: #888693;
position: absolute;
border-radius: 0px 0 10px 0;
left: -20px;
top: 80px;
z-index: 0;
}
.stand1 {
width: 10px;
height: 60px;
background: grey;
position: absolute;
top: 70px;
transform: rotateZ(-40deg);
left: 190px;
border-radius: 10px;
}
.stand2 {
width: 10px;
height: 60px;
background: grey;
position: absolute;
top: 70px;
transform: rotateZ(70deg);
left: 100px;
border-radius: 10px;
}
.stand3 {
width: 10px;
height: 60px;
background: grey;
position: absolute;
top: 70px;
transform: rotateZ(-70deg);
left: 30px;
border-radius: 10px;
}
.gol {
width: 30px;
height: 30px;
background: chocolate;
border-radius: 50%;
position: absolute;
top: 95px;
left: 55px
}
.st1 {
width: 10px;
height: 60px;
background: yellow;
position: absolute;
top: 80px;
left: 5px;
border-radius: 10px;
}
.st2 {
width: 10px;
height: 60px;
background: yellow;
position: absolute;
top: 80px;
left: 125px;
border-radius: 10px;
}
.st3 {
width: 10px;
height: 60px;
background: yellow;
position: absolute;
top: 80px;
left: 210px;
border-radius: 10px;
}
.front-wheel1 {
width: 100px;
transform: scale(0.4);
height: 100px;
border: 10px solid lightgrey;
border-radius: 50%;
position: absolute;
top: 25px;
left: -55px;
z-index: 1;
box-shadow: 1px 1px 1px 15px rgb(44, 44, 44);
animation: wheel 4s infinite;
}
@keyframes wheel {
50% {
height: 98px;
width: 102px;
}
}
.center {
width: 50px;
height: 50px;
background: lightgrey;
border-radius: 50%;
top: 25px;
left: 25px;
position: absolute;
animation: rotate -1s linear 0.5s infinite;
}
@keyframes rotate {
0% {
transform: rotateZ(0deg)
}
100% {
transform: rotateZ(360deg)
}
}
.c1 {
width: 115px;
height: 15px;
background: lightgrey;
border-radius: 50%;
position: absolute;
top: 15px;
left: -33px
}
.c2 {
width: 115px;
height: 15px;
background: lightgrey;
border-radius: 50%;
position: absolute;
top: 15px;
left: -33px;
transform: rotateZ(90deg)
}
.c3 {
width: 115px;
height: 15px;
background: lightgrey;
border-radius: 50%;
position: absolute;
top: 15px;
left: -33px;
transform: rotateZ(45deg)
}
.c4 {
width: 115px;
height: 15px;
background: lightgrey;
border-radius: 50%;
position: absolute;
top: 15px;
left: -33px;
transform: rotateZ(-45deg)
}
.meteoroid {
position: absolute;
top: 1%;
left: 650px;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 5px 5px white;
animation-name: meteoric;
animation-duration: 8s;
animation-iteration-count: 1;
}
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: radial-gradient(#eee, #ddd, #ccc);
position: absolute;
top: 35px;
left: 60px;
box-shadow: 10px 5px 50px 5px white;
animation: moon 35s linear 15s 1;
animation-fill-mode: forwards;
}
@keyframes moon {
from {
transform: scale(1)
}
to {
transform: scale(14)
}
}
@keyframes meteoric {
100% {
left: -3%;
top: 15%;
opacity: 0;
}
}
.meteoroid::after {
content: "";
position: absolute;
top: 50%;
left: 0%;
width: 50px;
height: 0;
background: white;
transform: rotate(-10deg);
box-shadow: 10px -5px 20px 10px white;
}
.sky-bg {
height: 1000px;
width: 100%;
background-size: 35rem;
background-image: url(http://www.script-tutorials.com/demos/360/images/stars.png);
background-repeat: repeat;
transform: scale(3);
}
.sky {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: 4000px;
height: 1000px;
background: purple;
z-index: -1;
animation: sky 0.7s linear 10s infinite, sky1 1s linear 20s infinite;
}
@keyframes sky {
from {
top: 0px
}
to {
top: 500px;
}
}
@keyframes sky1 {
from {
top: 0px;
transform: rotateZ(0deg)
}
to {
top: 500px;
transform: rotateZ(360deg)
}
}
body {
margin: 0;
padding: 0;
overflow: hidden;
background: purple
}
.virat {
width: 400px;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: transparent;
position: fixed;
}
.earthland {
width: 100%;
height: 300px;
background: brown;
position: absolute;
}
#rocket {
-webkit-perspective: 1000px;
perspective: 1000px;
position: absolute;
left: 25%;
overflow: hidden;
width: 100%;
height: 100%;
background: transparent;
font-size: 112.5%;
animation: rocket_slant 5s linear 20s 1;
animation-fill-mode: forwards
}
@keyframes rocket_slant {
from {
transform: rotateY(0deg)
}
to {
transform: rotateZ(-40deg);
}
}
.face {
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.scene,
.shape,
.face,
.face-wrapper,
.cr {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.scene {
width: 80em;
height: 80em;
top: 50%;
left: 25%;
margin: -40em 0 0 -40em;
transform: rotateY(100deg);
animation: slow 5s ease-in 5s 5, medium 5s ease-in 5s 5, fast 1s linear 10s infinite;
}
@keyframes slow {
0%,
100% {
transform: rotateY(100deg);
left: 25.2%;
}
50% {
transform: rotateY(250deg);
left: 24.7%
}
20% {
transform: rotateY(250deg);
left: 24.2%;
top: 51%
}
70% {
transform: rotateY(250deg);
left: 24.7%
}
}
@keyframes medium {
from {
transform: rotateY(360deg)
}
to {
transform: rotateY(0deg)
}
}
@keyframes fast {
from {
transform: rotateY(360deg)
}
to {
transform: rotateY(0deg)
}
}
.shape {
top: 50%;
left: 50%;
width: 0;
height: 0;
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
.face,
.face-wrapper {
overflow: hidden;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.face {
background-size: 100% 100%!important;
background-position: center;
}
.face-wrapper .face {
left: 100%;
width: 100%;
height: 100%
}
.photon-shader {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
.side {
left: 50%;
}
.cr,
.cr .side {
height: 100%;
}
[class*="cylinder"] .tp {
-webkit-transform: rotateX(90deg) translateY(-50%);
transform: rotateX(90deg) translateY(-50%);
}
[class*="cylinder"] .bm {
-webkit-transform: rotateX(-90deg) translateY(-50%);
transform: rotateX(-90deg) translateY(-50%);
}
[class*="cylinder"] .tp,
[class*="cylinder"] .bm,
[class*="cylinder"] .tp .photon-shader,
[class*="cylinder"] .bm .photon-shader {
border-radius: 50%;
}
[class*="cylinder"] .bm {
top: 100%;
}
[class*="pyramid"] .face-wrapper .face {
-webkit-transform: rotateZ(45deg) translateX(-35.35%) translateY(35.35%);
transform: rotateZ(45deg) translateX(-35.35%) translateY(35.35%);
}
[class*="pyramid"] .bk {
left: 100%;
}
[class*="pyramid"] .bm {
top: 100%;
-webkit-transform: rotateX(-90deg) translateY(-50%);
transform: rotateX(-90deg) translateY(-50%);
}
[class*="pyramid"] .rt,
[class*="pyramid"] .lt {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.cyl-1 {
-webkit-transform: translate3D(0em, -1.7777777777777775em, -0.11111111111111113em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: translate3D(0em, -1.7777777777777775em, -0.11111111111111113em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 2.3333333333333326em;
height: 5.555555555555555em;
margin: -2.7777777777777777em 0 0 -1.1666666666666663em;
animation: cyl1 8s linear 35s 1;
animation-fill-mode: forwards;
position: absolute;
}
@keyframes cyl1 {
to {
left: -1000000px;
}
}
.cyl-1 .tp,
.cyl-1 .bm {
width: 2.3333333333333326em;
height: 2.3333333333333326em;
}
.cyl-1 .side {
width: 0.5575681069103497em;
height: 5.555555555555555em;
}
.cyl-1 .s0 {
-webkit-transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s1 {
-webkit-transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s2 {
-webkit-transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s3 {
-webkit-transform: rotateY(90deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(90deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s4 {
-webkit-transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s5 {
-webkit-transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s6 {
-webkit-transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s7 {
-webkit-transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s8 {
-webkit-transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s9 {
-webkit-transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s10 {
-webkit-transform: rotateY(270deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(270deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s11 {
-webkit-transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s12 {
-webkit-transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .s13 {
-webkit-transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 1.1416666666666664em);
transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 1.1416666666666664em);
}
.cyl-1 .face,
.cyl-1 .side {
background-color: #FF9933;
}
/* .pyr-1 styles */
.pyr-1 {
-webkit-transform: translate3D(-8.049116928532385e-16em, -6.944444444444443em, -0.11111111111111063em) rotateX(-180deg) rotateY(-255deg) rotateZ(180deg);
transform: translate3D(-8.049116928532385e-16em, -6.944444444444443em, -0.11111111111111063em) rotateX(-180deg) rotateY(-255deg) rotateZ(180deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 1.355591507902536em;
height: 5em;
margin: -2.5em 0 0 -0.677795753951268em;
animation: py1 8s linear 35s 1;
animation-fill-mode: forwards;
position: absolute;
}
@keyframes py1 {
to {
left: 400000px;
}
}
.pyr-1 .face-wrapper {
width: 1.355591507902536em;
height: 0.677795753951268em;
}
.pyr-1 .face-wrapper .face {
width: 1.355591507902536em;
height: 1.355591507902536em;
}
.pyr-1 .ft {
-webkit-transform: scaleZ(7.444324549595626) scaleY(7.444324549595626) rotateX(7.719908991451702deg);
transform: scaleZ(7.444324549595626) scaleY(7.444324549595626) rotateX(7.719908991451702deg);
}
.pyr-1 .bk {
-webkit-transform: scaleZ(7.444324549595626) scaleY(7.444324549595626) rotateX(-7.719908991451702deg) rotateY(180deg);
transform: scaleZ(7.444324549595626) scaleY(7.444324549595626) rotateX(-7.719908991451702deg) rotateY(180deg);
}
.pyr-1 .rt {
-webkit-transform: scaleX(7.444324549595626) scaleY(7.444324549595626) rotateZ(7.719908991451702deg) rotateY(-90deg);
transform: scaleX(7.444324549595626) scaleY(7.444324549595626) rotateZ(7.719908991451702deg) rotateY(-90deg);
}
.pyr-1 .lt {
-webkit-transform: scaleX(7.444324549595626) scaleY(7.444324549595626) rotateZ(-7.719908991451702deg) rotateY(90deg);
transform: scaleX(7.444324549595626) scaleY(7.444324549595626) rotateZ(-7.719908991451702deg) rotateY(90deg);
}
.pyr-1 .bm {
width: 1.355591507902536em;
height: 1.355591507902536em;
}
.pyr-1 .face {
background-color: #E7E8EB;
}
.cyl-2 {
-webkit-transform: translate3D(0em, 2.4444444444444446em, -0.11111111111111113em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: translate3D(0em, 2.4444444444444446em, -0.11111111111111113em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 3.1111111111111107em;
height: 5em;
margin: -2.5em 0 0 -1.5555555555555554em;
}
.cyl-2 .tp,
.cyl-2 .bm {
width: 3.1111111111111107em;
height: 3.1111111111111107em;
}
.cyl-2 .side {
width: 0.7350908092137998em;
height: 5em;
}
.cyl-2 .s0 {
-webkit-transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s1 {
-webkit-transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s2 {
-webkit-transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s3 {
-webkit-transform: rotateY(90deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(90deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s4 {
-webkit-transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s5 {
-webkit-transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s6 {
-webkit-transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s7 {
-webkit-transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s8 {
-webkit-transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s9 {
-webkit-transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s10 {
-webkit-transform: rotateY(270deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(270deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s11 {
-webkit-transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s12 {
-webkit-transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .s13 {
-webkit-transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 1.5305555555555554em);
transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 1.5305555555555554em);
}
.cyl-2 .face,
.cyl-2 .side {
background-color: #FFFFFF;
}
.cyl-3 {
border-style: none;
-webkit-transform: translate3D(0em, 0.9999999999999998em, 1.9999999999999996em) rotateX(-91.6deg) rotateY(0deg) rotateZ(0deg);
transform: translate3D(0em, 0.9999999999999998em, 1.9999999999999996em) rotateX(-91.6deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 0.5245315125293689em;
height: 1.1115443166218282em;
margin: -0.5557721583109141em 0 0 -0.26226575626468446em;
}
.cyl-3 .tp,
.cyl-3 .bm {
width: 0.5245315125293689em;
height: 0.5245315125293689em;
}
.cyl-3 .side {
width: 0.14472089484682363em;
height: 1.1115443166218282em;
}
.cyl-3 .s0 {
-webkit-transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s1 {
-webkit-transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s2 {
-webkit-transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s3 {
-webkit-transform: rotateY(90deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(90deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s4 {
-webkit-transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s5 {
-webkit-transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s6 {
-webkit-transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s7 {
-webkit-transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s8 {
-webkit-transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s9 {
-webkit-transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s10 {
-webkit-transform: rotateY(270deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(270deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s11 {
-webkit-transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s12 {
-webkit-transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .s13 {
-webkit-transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.23726575626468446em);
transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.23726575626468446em);
}
.cyl-3 .face,
.cyl-3 .side {
background-color: #FFFFFF;
}
.cyl-4 {
-webkit-transform: translate3D(2.7755575615628914e-17em, 1.1666666666666665em, -2.277777777777779em) rotateX(-91.6deg) rotateY(0deg) rotateZ(0deg);
transform: translate3D(2.7755575615628914e-17em, 1.1666666666666665em, -2.277777777777779em) rotateX(-91.6deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 0.5834771942791248em;
height: 1.222612107181868em;
margin: -0.611306053590934em 0 0 -0.2917385971395624em;
}
.cyl-4 .tp,
.cyl-4 .bm {
width: 0.5834771942791248em;
height: 0.5834771942791248em;
}
.cyl-4 .side {
width: 0.15817486204968395em;
height: 1.222612107181868em;
}
.cyl-4 .s0 {
-webkit-transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s1 {
-webkit-transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s2 {
-webkit-transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s3 {
-webkit-transform: rotateY(90deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(90deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s4 {
-webkit-transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s5 {
-webkit-transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s6 {
-webkit-transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s7 {
-webkit-transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s8 {
-webkit-transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s9 {
-webkit-transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s10 {
-webkit-transform: rotateY(270deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(270deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s11 {
-webkit-transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s12 {
-webkit-transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .s13 {
-webkit-transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.2667385971395624em);
transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.2667385971395624em);
}
.cyl-4 .face,
.cyl-4 .side {
background-color: #FFFFFF;
}
/* .cyl-5 styles */
.cyl-5 {
-webkit-transform: translate3D(0em, 2.4444444444444446em, 3.111111111111112em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: translate3D(0em, 2.4444444444444446em, 3.111111111111112em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 0.8888888888888928em;
height: 8.333333333333332em;
margin: -4.166666666666666em 0 0 -0.4444444444444464em;
animation: escape1 4s linear 30s 1;
animation-fill-mode: forwards;
position: absolute;
}
.cyl-5 .tp,
.cyl-5 .bm {
width: 0.8888888888888928em;
height: 0.8888888888888928em;
}
.cyl-5 .side {
width: 0.22788308834680085em;
height: 8.333333333333332em;
}
.cyl-5 .s0 {
-webkit-transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s1 {
-webkit-transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s2 {
-webkit-transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s3 {
-webkit-transform: rotateY(90deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(90deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s4 {
-webkit-transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s5 {
-webkit-transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s6 {
-webkit-transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s7 {
-webkit-transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s8 {
-webkit-transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s9 {
-webkit-transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s10 {
-webkit-transform: rotateY(270deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(270deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s11 {
-webkit-transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s12 {
-webkit-transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .s13 {
-webkit-transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-5 .face,
.cyl-5 .side {
background-color: crimson;
}
/* .cyl-6 styles */
.cyl-6 {
-webkit-transform: translate3D(0em, 2.4444444444444446em, -3.4444444444444433em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: translate3D(0em, 2.4444444444444446em, -3.4444444444444433em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 0.8888888888888928em;
height: 8.333333333333332em;
margin: -4.166666666666666em 0 0 -0.4444444444444464em;
animation: escape1 4s linear 30s 1;
animation-fill-mode: forwards;
position: absolute;
}
@keyframes escape1 {
to {
top: 2000px
}
}
.cyl-6 .tp,
.cyl-6 .bm {
width: 0.8888888888888928em;
height: 0.8888888888888928em;
}
.cyl-6 .side {
width: 0.22788308834680085em;
height: 8.333333333333332em;
}
.cyl-6 .s0 {
-webkit-transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s1 {
-webkit-transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s2 {
-webkit-transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s3 {
-webkit-transform: rotateY(90deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(90deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s4 {
-webkit-transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s5 {
-webkit-transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s6 {
-webkit-transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s7 {
-webkit-transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s8 {
-webkit-transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s9 {
-webkit-transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s10 {
-webkit-transform: rotateY(270deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(270deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s11 {
-webkit-transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s12 {
-webkit-transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .s13 {
-webkit-transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.4194444444444464em);
transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 0.4194444444444464em);
}
.cyl-6 .face,
.cyl-6 .side {
background-color: crimson;
}
/* .pyr-2 styles */
.pyr-2 {
-webkit-transform: translate3D(2.7755575615628914e-17em, -2.4444444444444446em, 3.1111111111111103em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: translate3D(2.7755575615628914e-17em, -2.4444444444444446em, 3.1111111111111103em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
animation: escape1 4s linear 30s 1;
animation-fill-mode: forwards;
position: absolute;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 0.8888888888888928em;
height: 1.5555555555555554em;
margin: -0.7777777777777777em 0 0 -0.4444444444444464em;
}
.pyr-2 .face-wrapper {
width: 0.8888888888888928em;
height: 0.4444444444444464em;
}
.pyr-2 .face-wrapper .face {
width: 0.8888888888888928em;
height: 0.8888888888888928em;
}
.pyr-2 .ft {
-webkit-transform: scaleZ(3.640054944640244) scaleY(3.640054944640244) rotateX(15.945395900922927deg);
transform: scaleZ(3.640054944640244) scaleY(3.640054944640244) rotateX(15.945395900922927deg);
}
.pyr-2 .bk {
-webkit-transform: scaleZ(3.640054944640244) scaleY(3.640054944640244) rotateX(-15.945395900922927deg) rotateY(180deg);
transform: scaleZ(3.640054944640244) scaleY(3.640054944640244) rotateX(-15.945395900922927deg) rotateY(180deg);
}
.pyr-2 .rt {
-webkit-transform: scaleX(3.640054944640244) scaleY(3.640054944640244) rotateZ(15.945395900922927deg) rotateY(-90deg);
transform: scaleX(3.640054944640244) scaleY(3.640054944640244) rotateZ(15.945395900922927deg) rotateY(-90deg);
}
.pyr-2 .lt {
-webkit-transform: scaleX(3.640054944640244) scaleY(3.640054944640244) rotateZ(-15.945395900922927deg) rotateY(90deg);
transform: scaleX(3.640054944640244) scaleY(3.640054944640244) rotateZ(-15.945395900922927deg) rotateY(90deg);
}
.pyr-2 .bm {
width: 0.8888888888888928em;
height: 0.8888888888888928em;
}
.pyr-2 .face {
background-color: #FFFFFF;
}
/* .pyr-3 styles */
.pyr-3 {
-webkit-transform: translate3D(0em, -2.5000000000000004em, -3.444444444444445em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: translate3D(0em, -2.5000000000000004em, -3.444444444444445em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 0.8888888888888928em;
height: 1.5555555555555554em;
margin: -0.7777777777777777em 0 0 -0.4444444444444464em;
animation: escape1 4s linear 30s 1;
animation-fill-mode: forwards;
position: absolute;
}
.pyr-3 .face-wrapper {
width: 0.8888888888888928em;
height: 0.4444444444444464em;
}
.pyr-3 .face-wrapper .face {
width: 0.8888888888888928em;
height: 0.8888888888888928em;
}
.pyr-3 .ft {
-webkit-transform: scaleZ(3.640054944640244) scaleY(3.640054944640244) rotateX(15.945395900922927deg);
transform: scaleZ(3.640054944640244) scaleY(3.640054944640244) rotateX(15.945395900922927deg);
}
.pyr-3 .bk {
-webkit-transform: scaleZ(3.640054944640244) scaleY(3.640054944640244) rotateX(-15.945395900922927deg) rotateY(180deg);
transform: scaleZ(3.640054944640244) scaleY(3.640054944640244) rotateX(-15.945395900922927deg) rotateY(180deg);
}
.pyr-3 .rt {
-webkit-transform: scaleX(3.640054944640244) scaleY(3.640054944640244) rotateZ(15.945395900922927deg) rotateY(-90deg);
transform: scaleX(3.640054944640244) scaleY(3.640054944640244) rotateZ(15.945395900922927deg) rotateY(-90deg);
}
.pyr-3 .lt {
-webkit-transform: scaleX(3.640054944640244) scaleY(3.640054944640244) rotateZ(-15.945395900922927deg) rotateY(90deg);
transform: scaleX(3.640054944640244) scaleY(3.640054944640244) rotateZ(-15.945395900922927deg) rotateY(90deg);
}
.pyr-3 .bm {
width: 0.8888888888888928em;
height: 0.8888888888888928em;
}
.pyr-3 .face {
background-color: #FFFFFF;
}
.cyl-7 {
background: #128807;
-webkit-transform: translate3D(0em, 6.722222222222222em, -0.11111111111111249em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: translate3D(0em, 6.722222222222222em, -0.11111111111111249em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 2.2222222222222214em;
height: 3.5555555555555554em;
margin: -1.7777777777777777em 0 0 -1.1111111111111107em;
animation: cyl7 8s linear 37s 1;
animation-fill-mode: forwards;
position: absolute;
}
@keyframes cyl7 {
to {
top: 10000px
}
}
.cyl-7 .tp,
.cyl-7 .bm {
width: 2.2222222222222214em;
height: 2.2222222222222214em;
}
.cyl-7 .side {
width: 0.5322077208669997em;
height: 3.5555555555555554em;
}
.cyl-7 .s0 {
-webkit-transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(12.857142857142858deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s1 {
-webkit-transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(38.57142857142857deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s2 {
-webkit-transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(64.28571428571429deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s3 {
-webkit-transform: rotateY(90deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(90deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s4 {
-webkit-transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(115.71428571428572deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s5 {
-webkit-transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(141.42857142857144deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s6 {
-webkit-transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(167.14285714285714deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s7 {
-webkit-transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(192.85714285714286deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s8 {
-webkit-transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(218.57142857142858deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s9 {
-webkit-transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(244.2857142857143deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s10 {
-webkit-transform: rotateY(270deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(270deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s11 {
-webkit-transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(295.7142857142857deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s12 {
-webkit-transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(321.4285714285714deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .s13 {
-webkit-transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 1.0861111111111108em);
transform: rotateY(347.1428571428571deg) translate3D(-50%, 0, 1.0861111111111108em);
}
.cyl-7 .face,
.cyl-7 .side {
background-color: #128807;
}
.landearth {
width: 100%;
height: 300px;
background-image: linear-gradient(to top, #dd6345, #e39776, #dbc2c2);
position: absolute;
top: 400px;
animation: land 4s linear 7s 1;
animation-fill-mode: forwards;
}
@keyframes land {
100% {
top: 1000px;
}
}
.land_mark1 {
width: 150px;
height: 3px;
background: #9c694b;
border-radius: 50%;
position: absolute;
top: 30px
}
.land_mark2 {
width: 100px;
height: 3px;
background: #9c694b;
border-radius: 50%;
position: absolute;
top: 80px
}
.land_mark3 {
width: 150px;
height: 3px;
background: #9c694b;
border-radius: 50%;
position: absolute;
top: 130px;
left: 100px
}
.land_mark4 {
width: 120px;
height: 3px;
background: #9c694b;
border-radius: 50%;
position: absolute;
top: 170px;
left: -10px
}
.land_mark5 {
width: 150px;
height: 3px;
background: #9c694b;
border-radius: 50%;
position: absolute;
top: 130px;
left: 100px
}
</style>
<script>
/*
This code is for Space Contest
*/
alert(" This code is for space contest")
alert("Please Watch Till End (2 Minutes Approx)");
</script>
</head>
<body>
<div class="virat">
<div class="rover">
<h2>Mission Succesful</h2>
<div class="land">
<div class="rover_body">
<div class="line1"></div>
<div class="line2"></div>
<div class="ver1"></div>
<div class="ver2"></div>
<div class="ver3"></div>
<div class="head_rover">
<div class="leta"></div>
</div>
<div class="stand1">
</div>
<div class="stand2"></div>
<div class="stand3"></div>
<div class="gol"></div>
<div class="st1">
<div class="front-wheel1">
<div class="center">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
</div>
</div>
<div class="st2">
<div class="front-wheel1">
<div class="center">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
</div>
</div>
<div class="st3">
<div class="front-wheel1">
<div class="center">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="full">
<div class="landearth">
<div class="land_mark1"></div>
<div class="land_mark2"></div>
<div class="land_mark3"></div>
<div class="land_mark4"></div>
<div class="land_mark5"></div>
<div class="land_mark6"></div>
<div class="land_mark7"></div>
</div>
<div class="sky">
<div class="sky-bg"></div>
<div class="sky-bg"></div>
</div>
<div class="meteoroid"></div>
<div class="moon"></div>
<div id="rocket">
<div class="scene" >
<div class="shape cylinder-1 cyl-1">
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face tp">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s0">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
</div>
<div class="face side s1">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.364706);"></div>
</div>
<div class="face side s2">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.513726);"></div>
</div>
<div class="face side s3">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s4">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.537255);"></div>
</div>
<div class="face side s5">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.388235);"></div>
</div>
<div class="face side s6">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
</div>
<div class="face side s7">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
</div>
<div class="face side s8">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0470588);"></div>
</div>
<div class="face side s9">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.192157);"></div>
</div>
<div class="face side s10">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s11">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.215686);"></div>
</div>
<div class="face side s12">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
</div>
<div class="face side s13">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0745098);"></div>
</div>
</div>
<div class="shape pyramid-1 pyr-1">
<div class="face-wrapper ft">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.145098);"></div>
</div>
</div>
<div class="face-wrapper bk">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="face-wrapper lt">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="face-wrapper rt">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="shape cylinder-2 cyl-2">
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face tp">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s0">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
</div>
<div class="face side s1">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.364706);"></div>
</div>
<div class="face side s2">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.513726);"></div>
</div>
<div class="face side s3">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s4">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.537255);"></div>
</div>
<div class="face side s5">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.388235);"></div>
</div>
<div class="face side s6">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
</div>
<div class="face side s7">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
</div>
<div class="face side s8">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0470588);"></div>
</div>
<div class="face side s9">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.192157);"></div>
</div>
<div class="face side s10">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s11">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.215686);"></div>
</div>
<div class="face side s12">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
</div>
<div class="face side s13">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0745098);"></div>
</div>
</div>
<div class="shape cylinder-3 cyl-3">
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
</div>
<div class="face tp">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
</div>
<div class="face side s0">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
</div>
<div class="face side s1">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.388235);"></div>
</div>
<div class="face side s2">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.537255);"></div>
</div>
<div class="face side s3">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
</div>
<div class="face side s4">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.513726);"></div>
</div>
<div class="face side s5">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.364706);"></div>
</div>
<div class="face side s6">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
</div>
<div class="face side s7">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0745098);"></div>
</div>
<div class="face side s8">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
</div>
<div class="face side s9">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.215686);"></div>
</div>
<div class="face side s10">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.168627);"></div>
</div>
<div class="face side s11">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.192157);"></div>
</div>
<div class="face side s12">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0431373);"></div>
</div>
<div class="face side s13">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
</div>
</div>
<div class="shape cylinder-4 cyl-4">
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face tp">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s0">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
</div>
<div class="face side s1">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.364706);"></div>
</div>
<div class="face side s2">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.513726);"></div>
</div>
<div class="face side s3">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s4">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.537255);"></div>
</div>
<div class="face side s5">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.388235);"></div>
</div>
<div class="face side s6">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
</div>
<div class="face side s7">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
</div>
<div class="face side s8">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0470588);"></div>
</div>
<div class="face side s9">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.192157);"></div>
</div>
<div class="face side s10">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s11">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.215686);"></div>
</div>
<div class="face side s12">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
</div>
<div class="face side s13">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0745098);"></div>
</div>
</div>
<div class="shape cylinder-5 cyl-5">
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face tp">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s0">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
</div>
<div class="face side s1">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.364706);"></div>
</div>
<div class="face side s2">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.513726);"></div>
</div>
<div class="face side s3">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s4">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.537255);"></div>
</div>
<div class="face side s5">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.388235);"></div>
</div>
<div class="face side s6">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
</div>
<div class="face side s7">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
</div>
<div class="face side s8">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0470588);"></div>
</div>
<div class="face side s9">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.192157);"></div>
</div>
<div class="face side s10">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s11">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.215686);"></div>
</div>
<div class="face side s12">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
</div>
<div class="face side s13">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0745098);"></div>
</div>
</div>
<div class="shape cylinder-6 cyl-6">
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face tp">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s0">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
</div>
<div class="face side s1">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.364706);"></div>
</div>
<div class="face side s2">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.513726);"></div>
</div>
<div class="face side s3">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s4">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.537255);"></div>
</div>
<div class="face side s5">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.388235);"></div>
</div>
<div class="face side s6">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
</div>
<div class="face side s7">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
</div>
<div class="face side s8">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0470588);"></div>
</div>
<div class="face side s9">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.192157);"></div>
</div>
<div class="face side s10">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s11">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.215686);"></div>
</div>
<div class="face side s12">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
</div>
<div class="face side s13">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0745098);"></div>
</div>
</div>
<div class="shape pyramid-2 pyr-2">
<div class="face-wrapper ft">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.145098);"></div>
</div>
</div>
<div class="face-wrapper bk">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="face-wrapper lt">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="face-wrapper rt">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="shape pyramid-3 pyr-3">
<div class="face-wrapper ft">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.145098);"></div>
</div>
</div>
<div class="face-wrapper bk">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="face-wrapper lt">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="face-wrapper rt">
<div class="face">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
</div>
<div class="shape cylinder-7 cyl-7">
<div class="face bm">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face tp">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s0">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.219608);"></div>
</div>
<div class="face side s1">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.364706);"></div>
</div>
<div class="face side s2">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.513726);"></div>
</div>
<div class="face side s3">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s4">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.537255);"></div>
</div>
<div class="face side s5">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.388235);"></div>
</div>
<div class="face side s6">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.243137);"></div>
</div>
<div class="face side s7">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0980392);"></div>
</div>
<div class="face side s8">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0470588);"></div>
</div>
<div class="face side s9">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.192157);"></div>
</div>
<div class="face side s10">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.14902);"></div>
</div>
<div class="face side s11">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.215686);"></div>
</div>
<div class="face side s12">
<div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0666667);"></div>
</div>
<div class="face side s13">
<div class="photon-shader" style="background-color: rgba(0, 0, 0, 0.0745098);"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Comments
Post a Comment