<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="perspective"> <label class="tab" for="tab-top">TOP</label> <label class="tab" for="tab-front">FRONT</label> <label class="tab" for="tab-bottom">BOTTOM</label> <input type="radio" name="tabs" id="tab-top"> <input type="radio" name="tabs" id="tab-front"> <input type="radio" name="tabs" id="tab-bottom"> <div class="cube"> <div class="tab-content"> <h1>TOP CONTENT</h1> <p>THIS IS AWESOME</p> </div> <div class="tab-content"> <h1>FRONT CONTENT</h1> <p>THIS IS COOL</p> </div> <div class="tab-content"> <h1>BOTTOM CONTENT</h1> <p>THIS IS SWEET</p> </div> </div> </div>

body { background: #F8FFE5; } .perspective { -webkit-perspective: 76em; perspective: 76em; -webkit-perspective-origin: 50% 50px; perspective-origin: 50% 50px; width: 494px; margin: 0 auto; font-family: 'Roboto', sans-serif; font-weight: 100; color: #fff; text-align: center; } input { display: none; } .tab { position: absolute; width: 80px; height: 70px; background: pink; right: 0; line-height: 70px; font-weight: 300; } .tab:nth-child(1) { top: -5px; background: #06D6A0; } .tab:nth-child(2) { top: 69px; background: #1B9AAA; } .tab:nth-child(3) { top: 143px; background: #EF476F; } .cube { position: relative; margin: 60px auto 0; width: 300px; height: 200px; -webkit-transform-origin: 0 100px; transform-origin: 0 100px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 0.5s ease-in; transition: -webkit-transform 0.5s ease-in; transition: transform 0.5s ease-in; transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in; } .tab-content { width: 300px; height: 200px; position: absolute; } .tab-content h1 { font-size: 25px; margin: 75px 0 10px; font-weight: 300; } .tab-content p { font-size: 12px; } .tab-content:nth-child(2) { -webkit-transform: translateZ(100px); transform: translateZ(100px); background: #1B9AAA; } .tab-content:nth-child(1) { -webkit-transform: rotateX(-270deg) translateY(-100px); transform: rotateX(-270deg) translateY(-100px); -webkit-transform-origin: top left; transform-origin: top left; background: #06D6A0; } .tab-content:nth-child(3) { -webkit-transform: rotateX(-90deg) translateY(100px); transform: rotateX(-90deg) translateY(100px); -webkit-transform-origin: bottom center; transform-origin: bottom center; background: #EF476F; } #tab-top:checked ~ .cube { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); } #tab-front:checked ~ .cube { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } #tab-bottom:checked ~ .cube { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }