CODEWITHSUNDEEP
javascriptjqueryhtmlcss3d
heba
heba

Reputation: 119

How to rotate a css 3d cube using javascript and jQuery with a button trigger

I have been trying to rotate a css 3-d cube using a button trigger (#leftBtn) in javascript but I am not sure how animation works in css. I tried this jQuery function where #leftBtn is the button I want to rotate the cube with, .renderLeft and .rotate are the classes I am trying to call in javascript to rotate the shape, and #front is the front face/square of the cube that I am trying to rotate for now (then apply it to the rest of the faces). Here is a jsfiddle with the whole code.

$("#leftBtn").click(function(event) {    
      $("#front").toggleClass('renderLeft');
      $("#front").toggleClass('rotate');           
        });

Upvotes: 1

Views: 378

Answers (1)

Gokulakrishnan M
Gokulakrishnan M

Reputation: 360

you are using jquery so you must add jquery cdn before the script

https://codepen.io/mgkrish/pen/wPwjQP
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Upvotes: 3

Related Questions