<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- JJ --> <div id="page"> <div class="shadow-wrapper"> <div class="shadow"> <div> </div> </div> </div> <div class="box-wrapper"> <div class="box"> <div class="front"> <p> <i class="glyphicon glyphicon-music"></i> </p> </div> <div class="back"> <p> <i class="glyphicon glyphicon-download-alt"></i> </p> </div> <div class="top"> </div> <div class="bottom"> </div> <div class="left"> <p> <i class="glyphicon glyphicon-eye-open"></i> </p> </div> <div class="right"> <p> <i class="glyphicon glyphicon-tower"></i> </p> </div> </div><!-- end of .box --> </div><!-- end of .box-wrapper --> </div><!-- end of #page --> <!-- SDG -->

body{ background-color: #333; } #page { position: absolute; text-align: center; left: 40%; top: 50px; color: #222; } .box-wrapper { perspective: 800px; perspective-origin: 50% 100px; } .box { position: relative; width: 200px; transform-style: preserve-3d; } .box p { padding: 40px 0; } .box div { outline: 1px solid #999; position: absolute; width: 200px; height: 200px; opacity: 0.98; box-shadow: inset 0px 0px 100px #555; } .back { transform: translateZ(-100px) rotateY(180deg); background-color: #eee; } .right { transform: rotateY(-270deg) translateX(100px); transform-origin: top right; background-color: #ddd; } .left { transform: rotateY(270deg) translateX(-100px); transform-origin: center left; background-color: #ddd; } .top { transform: rotateX(-90deg) translateY(-100px); transform-origin: top center; background-color: #fafafa; } .bottom { transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; background-color: #bbb; } .front { transform: translateZ(100px); background-color: #eee; } @keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } .box, .shadow { animation: spin 15s infinite linear; } .left p { color: #27a05c; } .right p { color: #27a05c; } .front p { color: #27a05c; } .back p { color: #27a05c; } .shadow-wrapper { perspective: 800px; perspective-origin: 50% 100px; /* -webkit-perspective: 800px; -webkit-perspective-origin: 50% 100px;*/ } .shadow { position: relative; width: 200px; transform-style: preserve-3d; } .shadow div{ position: absolute; width: 200px; height: 200px; top: 2px; opacity: 0.98; box-shadow: 0px 0px 100px #000; transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; } .glyphicon{font-size:7em !important;}