<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="box"> <div> <span></span> <span></span> <span></span> <span></span> </div> </div>

body { margin:0; padding:0; background:#607d8b; } .box { position:absolute; top:calc(50% - 150px); left:calc(50% - 100px); transform:perspective(1000px) rotateY(-45deg); width:200px; height:300px; transform-style:preserve-3d; } .box:before { content:''; position:absolute; bottom: -80px; left: 0; width:100%; height:50px; background:#000; filter: blur(40px); opacity:0.9; transform:rotateX(90deg); } .box div { position:absolute; top:0; left:0; width:100%; height:100%; transform-style:preserve-3d; animation:animate 5s linear infinite; } .box div span { position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:linear-gradient(0deg, #ff0, #f00, #ff0); border-radius:20px; } .box div span:nth-child(1) { transform: rotateX(0deg); } .box div span:nth-child(2) { transform: rotateX(45deg); } .box div span:nth-child(3) { transform: rotateX(-45deg); } .box div span:nth-child(4) { transform: rotateX(90deg); } @keyframes animate { 0% { transform:perspective(1000px) rotateX(0deg); } 100% { transform:perspective(1000px) rotateX(359deg); } }