HTML and CSS rotating and zoomable 3D cube

Question

I made a cube with html and css. Also, i put jquery to activate css classes on pressing the buttons. However, they are not working properly and also, if i want to rotate the cube in the same direction more than once, i need to press the button twice. How can i fix this? Also, when the cube has been rotated, i want the black side to stay to the side. Presently, every time i turn the cube, the back side is becoming black. Same thing with the Hello. Also, how can i add a zoom feature which zooms in and out of the cube when i scroll? My code - http://pastebin.com/qZFfTsuG

Answer 1

I hope this code gets the effect you wanted. I have used different approach by using a variable yAngle to store current orientation. Here's the jsfiddle of this code.

 $(document).ready(function(){ var yAngle = 0; $("#button_left").click(function(){ yAngle = yAngle-90; $("section").css("transform",'rotateY('+yAngle+'deg)'); }); $("#button_right").click(function(){ yAngle = yAngle+90; $("section").css("transform","rotateY("+yAngle+"deg)"); }); }); 

 .wrap { perspective: 800px; perspective-origin: 50% 100px; } .cube { margin: 0 auto; position: relative; width: 200px; transform-style: preserve-3d; transition: transform 1s; } .cube div { box-shadow: inset 0 0 20px rgba(125,125,125,0.9); position: absolute; width: 200px; height: 200px; } .back { background: rgba(40,40,40,0.8); transform: translateZ(-100px) rotateY(180deg); } .right { background: rgba(189,25,400,0.3); transform: rotateY(-270deg) translateX(100px); transform-origin: top right; } .left { background: rgba(189,25,400,0.3); transform: rotateY(270deg) translateX(-100px); transform-origin: center left; } .top { background: rgba(189,25,400,0.3); transform: rotateX(-90deg) translateY(-100px); transform-origin: top center; } .bottom { background: rgba(189,25,400,0.3); transform: rotateX(90deg) translateY(100px); transform-origin: bottom center; } .front { background: rgba(189,25,400,0.3); transform: translateZ(100px); } /* @keyframes spin_left { from { transform: rotateY(0); } to { transform: rotateY(-90deg); } } .rotate-left { animation: spin_left 1s 1 linear; } @keyframes spin_right { from { transform: rotateY(0); } to { transform: rotateY(90deg); } } .rotate-right { animation: spin_right 1s 1 linear; } */ 

 <br><br><br><br><br><br><br><br><br><br> <div class="wrap"> <section class="cube"> <div class="front">Hello</div> <div class="back"></div> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> </section> </div> <input type="button" value="<--" id="button_left"> <input type="button" value="-->" id="button_right"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

Your code is problematic ...

• You fetch jquery.min.js twice, when you only need it once.
• You have two $('document').ready -calls, when you only need one. You should place both your button-listeners in the same one.
• CSS animation is experimental, and you should add an extra css-entry with vendor prefixes for Chrome and Safari to work ( -webkit-animation: ).
• The double-click-problem: You must either remove your rotate-left/right -css class when the animation is finished (via JavaScript), or create an animation for the second click, when the rotate-left/right -css class is automatically removed by your current toggleClass -call ... The best solution will take some figuring out, to decide.

All-in-all many issues.