Controlling the Css3 cube effect using javascript

Question

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 :

  <div id="expierment">
 <div id="cube">
 <div class="face front">
  Front face
</div>
<div class="face left">
 left side face
</div>
<div class="face right">
  Right face
</div>
<div class="face back">
 back face
</div>
<div class="face down">
 down face
</div>
<div class="face up">
 up face
</div>
</div>
</div>
<button id="up"><p>up</p></button>
<button id="down"><p>down</p></button>
<button id="left"><p>left</p></button>
<button id="right"><p>right</p></button>


       <style type="text/css">
             #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;

}

             #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;
             }


   </style>

as you notice i have make the (hover) as a comment cause i don't want to use it any more

and here is the Javascript code :

   <script type="text/javascript">

  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)";




  }


  </script>

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

blex · Accepted Answer · 2014-08-31 15:40:19Z

1

Just correct these lines:

but_up.onclick = up;
but_down.onclick = down;
but_right.onclick = right;
but_left.onclick = left;

You are not calling the function, but rather binding the function object to that click event.

JS Fiddle Demo

answered Aug 31, 2014 at 15:40

blex

25.7k6 gold badges48 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Istanbouly Over a year ago

thanks a lot but now i have one more question can i make it rotate right 90deg every time i press on right button ? also can i rotate it as i want by mouse holding ? thanks :D

Collectives™ on Stack Overflow

Controlling the Css3 cube effect using javascript

1 Answer 1

JS Fiddle Demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related