Pure css rocket
HTML
<div id="canvas-1">
<div class="fire"></div>
<div class="fin-wrap">
<div class="left-fin"></div>
<div class="right-fin"></div>
</div>
<div class="body">
<div class="head-wrap">
<div class="head"></div>
</div>
<div class="head-bottom"></div>
<div class="window">
<div class="window-inner"></div>
</div>
</div>
</div>
CSS
#canvas-1{
width:300px;
height:580px;
margin:20px auto;
/*border:1px #222 solid;*/
position: relative;
/*background-color:rgba(24,28,92, .7);*/
-webkit-transform:rotate(70deg);
}
.body, .head, .head-bottom, .head-wrap, .window, .window-inner, .fin-wrap,
.left-fin,.right-fin, .middle-fin, .fire, .fire-inner{
position: absolute;
}
.body{
width:150px;
height:400px;
background-color:rgb(222,222,222);
top:20px;
left:70px;
border-radius:70% 70% 60% 60%/70% 70%;
border:solid #888 1px;
}
.head{
background-color:rgb(230,18,18);
width:150px;
height:400px;
top:0px;
left:-12px;
border-radius:70% 70% 30% 30%;
}
.head-wrap{
overflow: hidden;
width:124px;
height:70px;
left:12px;
top:-1px;
}
.head-bottom{
width:114px;
height:20px;
background-color:rgb(230,18,18);
border-radius:50%;
top:59px;
left:18px;
}
.window{
width:80px;
height:80px;
background-color:#ddd;
border:1px #888 dashed;
top:110px;
left:33px;
border-radius:50%;
}
.window-inner{
width:66px;
height:66px;
background-color:rgb(18,205,230);
background-color:rgba(18,205,230,.6);
top:6px;
left:6px;
border-radius:50%;
border:1px #888 solid;
}
.fin-wrap{
width:216px;
height:150px;
top:321px;
left:38px;
}
.left-fin, .right-fin{
...