<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 ----------> <ul class="m"> <li class="m1 li" tabindex="1"><img src="//unsplash.it/500/500?random=1" alt=""/></li> <li class="m2 li" tabindex="2"><img src="//unsplash.it/500/500?random=2" alt=""/></li> <li class="m3 li" tabindex="3"><img src="//unsplash.it/500/500?random=3" alt=""/></li> <li class="m4 li" tabindex="4"><img src="//unsplash.it/500/500?random=4" alt=""/></li> <li class="m5 li" tabindex="5"><img src="//unsplash.it/500/500?random=5" alt=""/></li> <li class="m6 li" tabindex="6"><img src="//unsplash.it/500/500?random=6" alt=""/></li> <li class="cube-wrap"> <div class="cube"> <div class="front"><img src="//unsplash.it/500/500?random=1" alt=""/></div> <div class="right"><img src="//unsplash.it/500/500?random=2" alt=""/></div> <div class="top"><img src="//unsplash.it/500/500?random=3" alt=""/></div> <div class="left"><img src="//unsplash.it/500/500?random=4" alt=""/></div> <div class="bottom"><img src="//unsplash.it/500/500?random=5" alt=""/></div> <div class="back"><img src="//unsplash.it/500/500?random=6" alt=""/></div> </div> </li> </ul>

body { background: #eee; overflow: hidden; } .m { display: block; width: 232px; height: 500px; position: relative; float: right; padding: 0 30px 0 40px; margin-top: 40px; box-shadow: -10px 0 0 #D6D6D6; } .m .li { display: block; width: 100px; height: 100px; position: relative; z-index: 1000; float: left; margin: 0 10px 10px 0; border: solid 3px #55BFE2; background-color: #55BFE2; outline: none; cursor: pointer; } .m .li:focus img { opacity: 0.3; } .m .li > img { width: 100px; height: 100px; min-width: 100px; min-height: 100px; max-width: 100px; max-height: 100px; position: absolute; left: 0; top: 0; -webkit-transition: 0.3s; transition: 0.3s; } .cube-wrap { width: 500px; height: 500px; position: absolute; top: 0; right: 400px; -webkit-perspective: 1000px; perspective: 1000px; } .cube { width: 500px; height: 500px; position: absolute; top: 0; left: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(0deg) translateZ(-250px); transform: rotateX(0deg) translateZ(-250px); -webkit-transition: 2s 9999999s; transition: 2s 9999999s; } .cube div { width: 500px; height: 500px; position: absolute; top: 0; left: 0; background-color: #222; } .cube .front { -webkit-transform: rotateY(0deg) translateZ(250px); transform: rotateY(0deg) translateZ(250px); } .cube .back { -webkit-transform: rotateX(180deg) translateZ(250px); transform: rotateX(180deg) translateZ(250px); } .cube .right { -webkit-transform: rotateY(90deg) translateZ(250px); transform: rotateY(90deg) translateZ(250px); } .cube .left { -webkit-transform: rotateY(-90deg) translateZ(250px); transform: rotateY(-90deg) translateZ(250px); } .cube .top { -webkit-transform: rotateX(90deg) translateZ(250px); transform: rotateX(90deg) translateZ(250px); } .cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(250px); transform: rotateX(-90deg) translateZ(250px); } .cube img { width: 100%; height: 100%; min-width: 100%; min-height: 100%; max-width: 100%; max-height: 100%; position: absolute; left: 0; top: 0; } .li:focus ~ .cube-wrap .cube { -webkit-transition: 1.2s; transition: 1.2s; } .m1:focus ~ .cube-wrap .cube { -webkit-transform: translateZ(-250px) rotateY(0deg); transform: translateZ(-250px) rotateY(0deg); } .m2:focus ~ .cube-wrap .cube { -webkit-transform: translateZ(-250px) rotateY(-90deg); transform: translateZ(-250px) rotateY(-90deg); } .m3:focus ~ .cube-wrap .cube { -webkit-transform: translateZ(-250px) rotateX(-90deg); transform: translateZ(-250px) rotateX(-90deg); } .m4:focus ~ .cube-wrap .cube { -webkit-transform: translateZ(-250px) rotateY(90deg); transform: translateZ(-250px) rotateY(90deg); } .m5:focus ~ .cube-wrap .cube { -webkit-transform: translateZ(-250px) rotateX(90deg); transform: translateZ(-250px) rotateX(90deg); } .m6:focus ~ .cube-wrap .cube { -webkit-transform: translateZ(-250px) rotateX(180deg); transform: translateZ(-250px) rotateX(180deg); }