3D CSS Cube

by Sebastian Kay

HTML

<link rel="stylesheet" href="http://meinprojekt.kanu-marketing.com/j/templates/meinprojekttemlate/css/bootstrap.css">
<div class="btn-group">
  <button type="button" class="btn btn-default" active id="button-front" name="select-face">Vorne</button>
  <button type="button" class="btn btn-default" id="button-left" name="select-face">Links</button>
  <button type="button" class="btn btn-default" id="button-right" name="select-face">Rechts</button>

    <button type="button" class="btn btn-default" id="button-top" name="select-face">Oben</button>
  <button type="button" class="btn btn-default" id="button-bottom" name="select-face">Unten</button>
  <button type="button" class="btn btn-default" id="button-back" name="select-face">Hinten</button>
</div>
<br /><br />
<!-- CONTROLS -->
<input type="radio" checked id="radio-front" name="select-face"/>    
<input type="radio" id="radio-left" name="select-face"/>
<input type="radio" id="radio-right" name="select-face"/>
<input type="radio" id="radio-top" name="select-face"/>
<input type="radio" id="radio-bottom" name="select-face"/>
<input type="radio" id="radio-back" name="select-face"/>
<div></div><!-- separator -->

<div class="scene">
  <div class="cube">
      <div class="cube-face  cube-face-front"></div>
      <div class="cube-face  cube-face-back"></div>
      <div class="cube-face  cube-face-left"></div>
      <div class="cube-face  cube-face-right"></div>
      <div class="cube-face  cube-face-top"></div>
      <div class="cube-face  cube-face-bottom"></div>
   </div>
</div>

CSS

body {
  text-align: center;
  padding: 50px; }

.scene {
  display: inline-block;
  margin-top: 50px;
  width: 250px;
  height: 250px;
  perspective: 600px; }

.cube {
  position: relative;
  width: inherit;
  height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.6s; }

.cube-face {
  width: inherit;
  height: inherit;
  position: absolute;
  background: red;
  opacity: 0.8; }

.cube-face-front {
  background: url(http://www.meinprojekt.kanu-marketing.com/examples/3d_css_cube/cubeg1.jpg) no-repeat center center;
  transform: translate3d(0, 0, 125px); }

.cube-face-back {
  background: url(http://www.meinprojekt.kanu-marketing.com/examples/3d_css_cube/cubeg2.jpg) no-repeat center center;
  transform: rotateY(180deg) translate3d(0, 0, 125px); }

.cube-face-left {
  background: url(http://www.meinprojekt.kanu-marketing.com/examples/3d_css_cube/cubeg3.jpg) no-repeat center center;
  transform: rotateY(-90deg) translate3d(0, 0, 125px); }

.cube-face-right {
  background: url(http://www.meinprojekt.kanu-marketing.com/examples/3d_css_cube/cubeg4.jpg) no-repeat center center;
  transform: rotateY(90deg) translate3d(0, 0, 125px); }

.cube-face-top {
  background: url(http://www.meinprojekt.kanu-marketing.com/examples/3d_css_cube/cubeg5.jpg) no-repeat center center;
  transform: rotateX(90deg) translate3d(0, 0, 125px); }

.cube-face-bottom {
  background: url(http://www.meinprojekt.kanu-marketing.com/examples/3d_css_cube/cubeg6.jpg) no-repeat center center;
  transform: rotateX(-90deg) translate3d(0, 0, 125px); }

#radio-back:checked ~ .scene .cube {
  transform: rotateY(180deg); }

#radio-left:checked ~ .scene .cube {
  transform: rotateY(90deg); }

#radio-right:checked ~ .scene .cube {
  transform: rotateY(-90deg); }

#radio-top:checked ~ .scene .cube {
  transform: rotateX(-90deg); }

#radio-bottom:checked ~ .scene .cube {
  transform: rotateX(90deg); }
  
  /* Buttons */
  
#button-back:click ~ .scene .cube {
  transform: rotateY(180deg);...