Webkit 3D transforms, Keyframe Animation, and JQuery used to create a 3D blueprint of the Death Star. Probably only works in Safari/Chrome. Generated from http://codepen.io/bpmarkowitz/pen/fImhF, courtesy of benmarkowitz.com/thatsnomoon

index.html

	<div id="wrapper">
		<div id="container">
			<div id="output"></div>
        <div id="star">
          <div class="trench_wall north"></div>
          <div class="trench_wall"></div>
          <div class="trench_wall south"></div>
        </div>
		</div><!-- container -->
</div><!-- wrapper -->

<!--benmarkowitz.com/thatsnomoon-->
<!--benmarkowitz.com-------------->

script.js

$(document).ready(function() {

  //this is just used to draw and move all the elements
  
	for (i=1; i<=10; i++) {
		$('#star').append('<div class="latitude_line" id="lat_'+i+'_n"></div');
		$('#star').append('<div class="latitude_line" id="lat_'+i+'_s"></div');	

    // Radius of latitude line based on distance from "equator". That's the Pythagorean Theorem, son.
    c = (Math.sqrt( (250*250) - ((25*i)*(25*i))));

		// Width and height of line for offset
		width = c*2;
		height = c*2;
		dif = (500 - (c*2))/2;

		// Place & translate
		$('#lat_'+i+'_n').width(parseInt(c*2));
		$('#lat_'+i+'_n').height(parseInt(c*2));	
		$('#lat_'+i+'_n').css("top", dif+"px");
		$('#lat_'+i+'_n').css("left", dif+"px");		
		$('#lat_'+i+'_n').css("-webkit-transform", "translate3d(0,0,"+ (i*25) + "px) ");				
		$('#lat_'+i+'_s').width(parseInt(c*2));
		$('#lat_'+i+'_s').height(parseInt(c*2));	
		$('#lat_'+i+'_s').css("top", dif+"px");
		$('#lat_'+i+'_s').css("left", dif+"px");			
		$('#lat_'+i+'_s').css("-webkit-transform", "translate3d(0,0,"+ -(i*25) + "px) ");
		
    if(i == 10){
      $('#lat_'+i+'_n').width(parseInt(c*2)+40);
      $('#lat_'+i+'_n').height(parseInt(c*2)+40);	
      $('#lat_'+i+'_n').css("top", dif-20+"px");
      $('#lat_'+i+'_n').css("left", dif-20+"px");		
      $('#lat_'+i+'_n').css("-webkit-transform", "translate3d(0,0,"+ (i*24) + "px) ");				
      $('#lat_'+i+'_s').width(parseInt(c*2)+40);
      $('#lat_'+i+'_s').height(parseInt(c*2)+40);	
      $('#lat_'+i+'_s').css("top", dif-20+"px");
      $('#lat_'+i+'_s').css("left", dif-20+"px");			
      $('#lat_'+i+'_s').css("-webkit-transform", "translate3d(0,0,"+ -(i*24) + "px) ");	
    }
		
}
	
	// Death Star Cannon
	// Was going to do this with math, but currently just doing it manually
		
  // Outer ring
  $('#star').append('<div class="gun_line" id="gun_'+i+'_n"></div');
  c = 85;
  width = c*2;
  height = c*2;
  dif = (500 - (c*2))/2;
  $('#gun_'+i+'_n').width(parseInt(c*2));
  $('#gun_'+i+'_n').height(parseInt(c*2));	
  $('#gun_'+i+'_n').css("top", dif+"px");
  $('#gun_'+i+'_n').css("left", dif+"px");		
  $('#gun_'+i+'_n').css("-webkit-transform", "rotateX(-58deg) translate3d(0,0,"+ 245 + "px) ");		
  
  // Middle Ring
  $('#star').append('<div class="gun_line" id="gun_2_n"></div');
  c = 31;
  width = c*2;
  height = c*2;
  dif = (500 - (c*2))/2;
  $('#gun_2_n').width(parseInt(c*2));
  $('#gun_2_n').height(parseInt(c*2));	
  $('#gun_2_n').css("top", dif+"px");
  $('#gun_2_n').css("left", dif+"px");		
  $('#gun_2_n').css("-webkit-transform", "rotateX(-58deg) translate3d(0,0,"+ 238 + "px) ");
  
  // Inner Ring
  $('#star').append('<div class="gun_line" id="gun_3_n"></div');
  c = 10;
  width = c*2;
  height = c*2;
  dif = (500 - (c*2))/2;
  $('#gun_3_n').width(parseInt(c*2));
  $('#gun_3_n').height(parseInt(c*2));	
  $('#gun_3_n').css("top", dif+"px");
  $('#gun_3_n').css("left", dif+"px");		
  $('#gun_3_n').css("-webkit-transform", "rotateX(-58deg) translate3d(0,0,"+ 236 + "px) ");

  
});

style.css

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

#wrapper{
  -webkit-transform:scale(0.8);
  margin-top:-90px;
}

body {
  background:#fff;
  -webkit-perspective: 1000px;  
}


@-webkit-keyframes turn {
  100% { -webkit-transform: rotateY(30deg); } 
  0% { -webkit-transform: rotateY(-30deg); }  
}

#container{
  -webkit-animation-name: turn;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}

#star{
	position:relative;
	margin:50px auto 50px;
	width:500px;
	height:500px;	
	-webkit-transform-style: preserve-3d;  	
	-webkit-transition:none;	
  -webkit-transform:rotateX(60deg);
}




.anim{
	-webkit-transition:all 1s ease-out !important;	
}


.trench_wall{
	background-clip: padding-box;
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	position:absolute;
	top:5px;
	left:5px;
	background:rgba(0,0,0,0);
	width:490px;
	height:490px;
	border-radius:300px;
	-webkit-transform-style: preserve-3d;  	
	overflow:hidden;
	border:3px solid #437faf;
}

.north{
  -webkit-transform:translate3d(0,0,5px);
}

.south{
  -webkit-transform:translate3d(0,0,-5px);		
}

.latitude_line{
	position:absolute;
	border-radius:300px;
	-webkit-transform-style: preserve-3d;  	
	background:rgba(255,255,255,.3);
	width:0px;
	height:0px;
	border:3px solid #437faf;
	border-radius:500px;
	opacity:1;
	-webkit-transition:all 1s bicubic;
}

.east, .west{
  border:2px solid #437faf;	
  opacity:.5;
  background:none;
}

#lat_3_n{
  clip:rect(0px,500px,465px,0);
}
#lat_4_n{
  clip:rect(0px,500px,441px,0);
}
#lat_5_n{
  clip:rect(0px,500px,413px,0);
}
#lat_6_n{
  clip:rect(0px,500px,381px,0);
}
#lat_7_n{
  clip:rect(0px,500px,344px,0);
}

.active{
	opacity:1;
}

.longitude_line{
	position:absolute;
	border-radius:300px;
	-webkit-transform-style: preserve-3d;  	
	background:rgba(0,0,0,0);
	width:500px;
	height:500px;
	border-radius:300px;	
	border:3px solid #437faf;
}

.gun_line{
	position:absolute;
	border-radius:300px;
	-webkit-transform-style: preserve-3d;  	
	background:rgba(0,0,0,0);
	width:0px;
	height:0px;
	border:2px solid #437faf;
}