JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<div class="stage">
<!-- top -->
<div class="starship-top-0"></div>
<div class="starship-top-1"></div>
<div class="starship-top-2"></div>
<div class="starship-top-3"></div>
<div class="starship-top-4"></div>
<div class="starship-top-5"></div>
<div class="starship-top-6"></div>
<!-- topleft -->
<div class="starship-topleft-0"></div>
</div>
CSS
html{
height:100%;
}
body{
height:100%;
margin:0px;
perspective:500px;
}
.stage{
transform-style:preserve-3d;
transform: rotateY(66deg) rotateZ(-80deg) translateX(1000px) translateZ(-1000px) scaleX(.2) scaleY(.2) scaleZ(.2);
height:0px;
width:0px;
top:50%;
left:50%;
position:absolute;
margin-top:200px;
animation: orbit 10s infinite linear;
}
@keyframes orbit{
0% { transform: rotateY(0deg) translateZ(1000px) scaleX(.2) scaleY(.2) scaleZ(.2); }
100% { transform: rotateY(360deg) translateZ(1000px) scaleX(.2) scaleY(.2) scaleZ(.2); }
}
.starship-top-0{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
transform:rotateX(90deg) scaleX(10) scaleY(10) scaleZ(10);
background-image:url(http://aninoob.com/particles/assets/spacestation/outer.wall.window.png);
background-size:cover;
backface-visibility:hidden;
pointer-events:none !important;
position:absolute;
top:50%;
left:50%;
pointer-events:none !important;
}
.starship-top-1{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
transform:rotateX(90deg) translateY(-2000px) scaleX(10.01) scaleY(10.01) scaleZ(10.01);
background-image:url(http://aninoob.com/particles/assets/spacestation/outer.wall.window.png);
background-size:cover;
backface-visibility:hidden;
pointer-events:none !important;
position:absolute;
top:50%;
left:50%;
pointer-events:none !important;
}
.starship-top-2{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
transform:rotateX(90deg) translateY(-4000px) scaleX(10.01) scaleY(10.01) scaleZ(10.01);
background-image:url(http://aninoob.com/particles/assets/spacestation/outer.wall.window.3.png);
background-size:cover;
backface-visibility:hidden;
pointer-events:none !important;
position:absolute;
top:50%;
left:50%;
pointer-events:none !important;
}
.starship-top-3{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
transform:rotateX(90deg) translateY(-6000px)...