CSS 3D Box

by amindunited

HTML

<div class="container">
    <div class="box show-top">
        <div class="face front">Front</div>
        <div class="face back">Back</div>
        <div class="face left">L</div>
        <div class="face right">R</div>
        <div class="face top">Top</div>
        <div class="face bottom">Bottom</div>
    </div>
</div>
<button class="turnButton">Turn --></button>

CSS

.container {
  width: 200px;
  height: 300px;
  position: relative;
  perspective: 1000px;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
    
  transform-origin: 50% 200px; 
}












.box .front  { background-color: rgba(256, 0, 0, .35); }
.box .back   { background-color: rgba(0, 256, 0, .35); }
.box .right  { background-color: rgba(0, 0, 256, .35); }
.box .left   { background-color: rgba(126, 0, 0, .35); }
.box .top    { background-color: rgba(0, 126, 0, .35); }
.box .bottom { background-color: rgba(0, 0, 126, .35); }

.box .face {
    display: block;
    position: absolute;
    border: 2px solid black;
}
.box .front, .box .back { width: 200px; height: 300px; }
.box .right,
.box .left { width: 20px; height: 300px; left: 100px; }

.box .top,
.box .bottom { width: 300px; height: 20px; top: 50px; }



.box .front  { transform: rotateY(   0deg ) translateZ(  50px ); }
.box .back   { transform: rotateX( 180deg ) translateZ(  50px ); }
.box .right  { transform: rotateY(  90deg ) translateZ( 150px ); }
.box .left   { transform: rotateY( -90deg ) translateZ( 150px ); }
.box .top    { transform: rotateX(  90deg ) translateZ( 100px ); }
.box .bottom { transform: rotateX( -90deg ) translateZ( 100px ); }




/**

*/


    .container {
      width: 500px;
      height: 500px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 1200px;
         -moz-perspective: 1200px;
           -o-perspective: 1200px;
              perspective: 1200px;
    }

    .box {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
...

JavaScript

var positions = [
    'show-front',
    'show-back',
    'show-right',
    'show-left',
    'show-top',
    'show-bottom'
];

function turnIt () {
    var classList = document.querySelector('.box').classList;
    var classIndex = positions.indexOf(classList[1]);
    
    if (classIndex >= (positions.length -1) ) {
        classIndex = -1;
    }
    
    classList.remove(classList[1]);
    
    classList.add(positions[classIndex+1]);
    
    console.log("classList", classList);
}



document.querySelector('.turnButton').addEventListener('click', turnIt);