<h1>3D Box <span>With CSS and JS</span></h1>

<section class="container">
  <div id="box" class="box show-front">
    <figure class="front"></figure>
    <figure class="back"></figure>
    <figure class="right"></figure>
    <figure class="left"></figure>
    <figure class="top"></figure>
    <figure class="bottom"></figure>
  </div>
</section>
 
<ul id="options">
   <li><button class="current show-front">Front</button></li>
   <li><button class="show-back">Back</button></li>
   <li><button class="show-right">Right</button></li>
   <li><button class="show-left">Left</button></li>
   <li><button class="show-top">Top</button></li>
   <li><button class="show-bottom">Bottom</button></li>
   <!--
   <li><button id="toggle-backface-visibility">Toggle Backface Visibility</button></li>
   -->
</ul>

<p class="help">Rollover box to see the backface!</p>
<p class="link">See the <a href="https://codepen.io/wallaceerick/pen/ojtal">Pure CSS Tabs</a> demo!</p>


<!-- TO DO
<h1>Other Samples <span>With Different Positions</span></h1>


<section class="container">
  <div id="box" class="box show-front">
    <figure class="front"></figure>
    <figure class="back"></figure>
    <figure class="right"></figure>
    <figure class="left"></figure>
    <figure class="top"></figure>
    <figure class="bottom"></figure>
  </div>
</section>
-->

@import url("https://fonts.googleapis.com/css?family=Lato");

//CONFIG
$box-width: 200px;
$box-height: $box-width / 1.5;
$primary-color: #9b59b6;
$secundary-color: #8e44ad;

* {
  margin: 0;
  padding: 0; 
  box-sizing: border-box;
}
body {
  text-align: center;
  background: $primary-color;
  padding: 20px;
  font-family: Lato;
  color: #fff;
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase; 
  margin: 20px 0 10px 10px; 
  span { 
    font-size: 13px;
    display: block;
    padding-left: 4px;
  } 
}

//BOX
.container {
      width: $box-width;
      height: $box-height; 
      position: relative;
      margin: 40px auto;
      //border: 1px solid #CCC;
      perspective: 1200px;
    }

    .box {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      transition: transform 0.5s;
      figure {
          display: table;
          position: absolute;  
          text-align: center; 
          color: white;
      }
    }
    
    //Sizes
    .box .front,
    .box .back {
      width: $box-width;
      height: $box-height;
    } 
    .box .right,
    .box .left {
      width: $box-width / 3;
      height: $box-height;
    } 
    .box .top,
    .box .bottom {
      width: $box-width;
      height: $box-width / 3;
    }

    //Positions
    .box .right,
    .box .left {
      left: $box-width / 3;
    } 
    .box .top,
    .box .bottom {
      top: $box-height / 4;
    }

    //Colors
    .box .front,
    .box .back   { background: darken($secundary-color, 5%);}
    .box .right,
    .box .left,
    .box .top,
    .box .bottom { background: darken($secundary-color, 15%);}
    
    //Transforms
    .box .front  {
      transform: translateZ($box-height / 4);
    }
    .box .back   {
      transform: rotateX(-180deg) translateZ($box-height / 4);
    }
    .box .right  {
      transform: rotateY(90deg) translateZ($box-width / 2);
    }
    .box .left {
      transform: rotateY(-90deg) translateZ($box-width / 2);
    }
    .box .top {
      transform: rotateX(90deg) translateZ($box-height / 2);
    }
    .box .bottom {
      transform: rotateX(-90deg) translateZ($box-height / 2);
    }

    //Show Specific Face
    .box.show-front {
      transform: translateZ($box-height / -4);
    }
    .box.show-back {
      transform: translateZ($box-height / -4) rotateX(-180deg);
    }
    .box.show-right {
      transform: translateZ($box-width / -2) rotateY(-90deg);
    }
    .box.show-left {
      transform: translateZ($box-width / -2) rotateY(90deg);
    }
    .box.show-top {
      transform: translateZ($box-height / -2) rotateX(-90deg); 
    }
    .box.show-bottom {
      transform: translateZ($box-height / -2) rotateX(90deg);
    }
    
    //Rollover
    .box:hover {
      transform: rotateX(-180deg) translateZ($box-height / 4);
    }
//Buttons
ul#options {
  list-style: none;
  display: table;
  margin-left: auto;
  margin-right: auto; 
  li {
    float: left;
    margin-right: 5px;
    button {
      outline: none;
      display: block;
      cursor: pointer;
      border: none;
      padding: 10px 20px;
      color: #fff;
      font-family: 'Lato';
      text-transform: uppercase;
      font-size: 14px;
      background: darken($secundary-color, 5%);
      border-radius: 2px;
      transition: all 0.2s ease-in;
      &:hover {
        background: darken($secundary-color, 15%);
      }
      &.current {
        background: darken($secundary-color, 20%);
      }
    }
  }
}

p.help {
  text-transform: uppercase;
  margin: 20px;
}
p.link {
  clear: both;
  margin-top: 40px;
  a {
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    color: #fff;
    padding: 5px 10px;
    margin: 0 5px;
    background-color: darken($secundary-color, 5);
    transition: all 0.2s ease-in;
    &:hover {
      background-color: darken($secundary-color, 20);
    }
  }
}
View Compiled
/* 
REFERENCE:
http://24ways.org/2010/intro-to-css-3d-transforms/ 
by David DeSandro
*/
var init = function() {
  var box = document.querySelector('.box'),
      showPanelButtons = document.querySelectorAll('ul#options li button'),
      panelClassName = 'show-front',

      onButtonClick = function( event ){
        console.log(box)
        $(box).removeClass( panelClassName );
        panelClassName = event.target.className;
        $(box).addClass( panelClassName );
      };

  for (var i=0, len = showPanelButtons.length; i < len; i++) {
    showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
  }
  
  // document.getElementById('toggle-backface-visibility').addEventListener( 'click', function(){
  //   box.toggleClass('panels-backface-invisible');
  // }, false);
  
};
  
window.addEventListener( 'DOMContentLoaded', init, false);


//Only to Demo
$('button').click(function(){
  $('ul#options li button').removeClass('current');
  $(this).addClass('current');
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://desandro.github.io/3dtransforms/js/utils.js