title: Controlling the Css3 cube effect using javascript
body: <p>Hello guys i have been trying to take the control of the CSS3 cube using javascript but it's haven't worked with me i don't know what is the problem here is my code :</p>
  
  <pre><code>  &lt;div id="expierment"&gt;
   &lt;div id="cube"&gt;
   &lt;div class="face front"&gt;
    Front face
  &lt;/div&gt;
  &lt;div class="face left"&gt;
   left side face
  &lt;/div&gt;
  &lt;div class="face right"&gt;
    Right face
  &lt;/div&gt;
  &lt;div class="face back"&gt;
   back face
  &lt;/div&gt;
  &lt;div class="face down"&gt;
   down face
  &lt;/div&gt;
  &lt;div class="face up"&gt;
   up face
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;button id="up"&gt;&lt;p&gt;up&lt;/p&gt;&lt;/button&gt;
  &lt;button id="down"&gt;&lt;p&gt;down&lt;/p&gt;&lt;/button&gt;
  &lt;button id="left"&gt;&lt;p&gt;left&lt;/p&gt;&lt;/button&gt;
  &lt;button id="right"&gt;&lt;p&gt;right&lt;/p&gt;&lt;/button&gt;
  
  
         &lt;style type="text/css"&gt;
               #expierment{
                 -webkit-perspective: 800;
                 -webkit-perspective-origin: 50% 200px;
                  -moz-perspective: 800; 
                 -moz-perspective-origin: 50% 200px;
                 }
  
               #cube{
                   position: relative;
                   margin: 100px auto 0 ;
                   height:300px;
                   width:300px;
                   -webkit-transition: -webkit-transform .5s linear;
                   -webkit-transform-style: preserve-3d;
                   -moz-transition: -webkit-transform .5s linear;
                   -moz-transform-style: preserve-3d;
                  }
  
               .face{
                    position: absolute;
                    height:300px;
                    width:300px;
                    padding: 0px;
                    font-size: 27px;
                    line-height: 1em;
                    color: #fff;
                    border: 1px solid #555;
                    border-radius: 3px ;
               }
  
               #cube .front {
  -webkit-transform: translateZ(150px);
  -moz-transform: translateZ(150px);
  background-color:red;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>             #cube .left{
                 -webkit-transform: rotateY(-90deg)  translateZ(150px);
                 -moz-transform: rotateY(-90deg)  translateZ(150px);
               background-color: orange ;
               }
  
               #cube .right{
                 -webkit-transform: rotateY(90deg) translateZ(150px);
                 -moz-transform: rotateY(90deg) translateZ(150px);
               background-color: green ;
               }
               #cube .back{
                 -webkit-transform: rotateY(-180deg) translateZ(150px);
                 -moz-transform: rotateY(-180deg) translateZ(150px);
               background-color: blue ;
               }
               #cube .up{
                 -webkit-transform: rotateX(90deg) translateZ(150px);
                 -moz-transform: rotateX(90deg) translateZ(150px);
               background-color: gray ;
               }
               #cube .down{
                 -webkit-transform: rotateX(-90deg) translateZ(150px);
                 -moz-transform: rotateX(-90deg) translateZ(150px);
               background-color: #AA00CC ;
               }
  
             /* #cube:hover {
                 -webkit-transform: rotatey(90deg);
               } */
               button{
                 width: 50px;
                 height: 50px;
                 text-align : center;
                 padding-bottom :15px;
               }
  
  
     &lt;/style&gt;
  </code></pre>
  
  <p>as you notice i have make the (hover) as a comment cause i don't want to use it any more </p>
  
  <p>and here is the Javascript code :</p>
  
  <pre><code>   &lt;script type="text/javascript"&gt;
  
    var cube_node = document.getElementById("cube");
    var but_up = document.getElementById("up") ;
    var but_down = document.getElementById("down");
    var but_right = document.getElementById("right");
    var but_left = document.getElementById("left");
  
    but_up.onclick = up();
    but_down.onclick = down();
    but_right.onclick = right();
    but_left.onclick = left();
  
  
  
    function up(){
      cube_node.style.webkitTransform="rotateX(-90deg)";
  
  
     }
    function down(){
      cube_node.style.webkitTransform="rotateX(90deg)";
  
  
  
    }
    function left(){
      cube_node.style.webkitTransform="rotateY(90deg)";
  
  
    }
    function right(){
      cube_node.style.webkitTransform="rotateY(-90deg)";
  
  
  
  
    }
  
  
    &lt;/script&gt;
  </code></pre>
  
  <p>so please correct my code also if anyone know how can i take this effect a step forward like how to control the cube by mouse holder i will appreciate it and thanks  </p>