<div class="buttons">
    <button class="button6">Show Back</button><br>
    <button class="button5">Show Front</button><br>
    <button class="button4">Show Right</button><br>
    <button class="button3">Show Left</button><br>
    <button class="button2">Show Top</button><br>
    <button class="button1">Show Bottom</button>
  </div>
<p>&nbsp;</p><br clear="all"><br clear="all"><br clear="all"><br clear="all"><br clear="all">
<div id="box">
<section class="container">
  <div id="cube">
    <figure class="front">Front</figure>
    <figure class="back">Back</figure>
    <figure class="right">Right</figure>
    <figure class="left">Left</figure>
    <figure class="top">Top</figure>
    <figure class="bottom">Bottom</figure>
  </div>
  </section></div>
<br><br clear="all">

 <div class="buttons2">
    <button class="button6a">Show Back</button><br>
    <button class="button5a">Show Front</button><br>
    <button class="button4a">Show Right</button><br>
    <button class="button3a">Show Left</button><br>
    <button class="button2a">Show Top</button><br>
    <button class="button1a">Show Bottom</button>
  </div>
<p>&nbsp;</p><br clear="all"><br clear="all"><br clear="all"><br clear="all"><br clear="all">
<div id="box2">
<section class="container2">
  <div id="cube2">
    <figure class="front2">Front</figure>
    <figure class="back2">Back</figure>
    <figure class="right2">Right</figure>
    <figure class="left2">Left</figure>
    <figure class="top2">Top</figure>
    <figure class="bottom2">Bottom</figure>
  </div>
  </section></div>
<br><br clear="all">

#box {width: 200px;
height:200px;
background-color:black;
border: 1px solid white;
}
.container {
  width: 200px;
  height: 200px;
  margin:0 auto;
  padding-top:0px;
  position: relative;
  perspective: 1000px;
  /*background-color:black;*/
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

#cube figure {
  margin: 0;
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
  font-size:42px;
  font-weight:bold;
  text-align:center;
}
#cube .front  { transform: rotateY( 0deg ) translateZ( 100px ); background-color:red; opacity: .7;}
#cube .back   { transform: rotateX( 180deg ) translateZ( 100px ); background-color:blue; opacity: .7;}
#cube .right  { transform: rotateY(  90deg ) translateZ( 100px ); background-color:green; opacity: .7;}
#cube .left   { transform: rotateY( -90deg ) translateZ( 100px ); background-color:yellow; opacity: .7;}
#cube .top    { transform: rotateX(  90deg ) translateZ( 100px ); background-color:purple; opacity: .7;}
#cube .bottom { transform: rotateX( -90deg ) translateZ( 100px ); background-color:black; opacity: .7; color: white;}
#cube { transform: translateZ( -100px ); }
#cube.show-front  { transform: translateZ( 100px ) rotateX(    0deg ); }
#cube.show-back   { transform: translateZ( -100px ) rotateX( -180deg ); }
#cube.show-right  { transform: translateZ( -100px ) rotateY(  -90deg ); }
#cube.show-left   { transform: translateZ( -100px ) rotateY(   90deg ); }
#cube.show-top    { transform: translateZ( -100px ) rotateX(  -90deg ); }
#cube.show-bottom { transform: translateZ( -100px ) rotateX(   90deg ); }

#cube { transition: transform 1s; }

.buttons { position:absolute; top:0; float:left;  }
.buttons button{width:150px; padding-bottom:3px; font-weight:bold; }







#box2 {width: 200px;
height:200px;
background-color:black;
border: 1px solid white;
top:0;
  right: 350px;
  position:absolute;
}
.container2 {
  width: 200px;
  height: 200px;
  margin:0 auto;
  padding-top:0px;
  position: relative;
  float:right;
  perspective: 1000px;
  /*background-color:black;*/
}

#cube2 {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

#cube2 figure {
  margin: 0;
  width: 196px;
  height: 196px;
  display: block;
  position: absolute;
  border: 2px solid black;
  font-size:42px;
  font-weight:bold;
  text-align:center;
}
#cube2 .front2  { transform: rotateY( 0deg ) translateZ( 100px ); background:linear-gradient(blue,red); opacity: 1;}
#cube2 .back2   { transform: rotateX( 180deg ) translateZ( 100px ); background:linear-gradient(grey,blue); opacity: 1;}
#cube2 .right2  { transform: rotateY(  90deg ) translateZ( 100px ); background:linear-gradient(green, yellow); /*opacity: 1;*/}
#cube2 .left2   { transform: rotateY( -90deg ) translateZ( 100px ); background:linear-gradient(white,yellow); opacity: 1;}
#cube2 .top2    { transform: rotateX(  90deg ) translateZ( 100px ); background:linear-gradient(purple, red); opacity: 1;}
#cube2 .bottom2 { transform: rotateX( -90deg ) translateZ( 100px ); background:linear-gradient(black, silver); opacity: 1; color: white;}
#cube2 { transform: translateZ( -100px ); }
#cube2.show-front2  { transform: translateZ( 100px ) rotateX(    0deg ); }
#cube2.show-back2   { transform: translateZ( -100px ) rotateX( -180deg ); }
#cube2.show-right2  { transform: translateZ( -100px ) rotateY(  -90deg ); }
#cube2.show-left2   { transform: translateZ( -100px ) rotateY(   90deg ); }
#cube2.show-top2    { transform: translateZ( -100px ) rotateX(  -90deg ); }
#cube2.show-bottom2 { transform: translateZ( -100px ) rotateX(   90deg ); }

#cube2 { transition: transform 1s; }

.buttons2 { position:absolute; right:0; top:0; float:right;  }
.buttons2 button{width:150px; padding-bottom:3px; font-weight:bold; }

 $(document).ready(function() {
        $('.button1').click(function() {
                $('#cube').toggleClass("show-bottom");
        });   
    $('.button2').click(function() {
                $('#cube').toggleClass("show-top");
        });  
   $('.button3').click(function() {
                $('#cube').toggleClass("show-left");
        });  
   $('.button4').click(function() {
                $('#cube').toggleClass("show-right");
        });  
    $('.button5').click(function() {
                $('#cube').toggleClass("show-front");
        });  
    $('.button6').click(function() {
                $('#cube').toggleClass("show-back");
       });
       $('.button1a').click(function() {
                $('#cube2').toggleClass("show-bottom2");
     });
    $('.button2a').click(function() {
                $('#cube2').toggleClass("show-top2");
        });  
   $('.button3a').click(function() {
                $('#cube2').toggleClass("show-left2");
        });  
   $('.button4a').click(function() {
                $('#cube2').toggleClass("show-right2");
        });  
    $('.button5a').click(function() {
                $('#cube2').toggleClass("show-front2");
        });  
    $('.button6a').click(function() {
                $('#cube2').toggleClass("show-back2");
        });  
   
//addClass or toggleClass ??
   
   
   
   
    });