<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="main"> <div class="cube"> <div class="layer right">Right</div> <div class="layer left">Left</div> <div class="layer front">Front</div> <div class="layer back">Back</div> <div class="layer top">Top</div> <div class="layer bottom">Bottom</div> </div> </div> </div> </div>

.main{ width : 200px; height : 200px; margin : 100px auto;} .cube{ perspective : 10000px; width : 100%; height : 100%; perspective-origin : 150% 150%; transform-style : preserve-3d; animation : ani 7s infinite;}.layer{ position : absolute; line-height : 200px; width : 200px; height : 200px; font-size : 50px; color : #000; text-align : center;}.right{ background-color : red; transform : rotateY(90deg) translateZ(100px);}.left{ background-color : green; transform : rotateY(-90deg) translateZ(100px);}.front{ background-color : yellow; transform : translateZ(100px);}.back{ background-color : cyan; transform : rotateY(180deg) translateZ(100px);}.top{ background-color : purple; transform : rotateX(90deg) translateZ(100px);}.bottom{ background-color : blue; transform : rotateX(-90deg) translateZ(100px);}@keyframes ani{ 25%{transform:rotateX(360deg);} 50%{transform:rotateY(180deg) translateZ(100px);} 75%{transform:rotateY(35deg) rotateX(45deg);} 100%{transform:rotateY(270deg) rotateX(360deg);} }