如何使用javascript和jQuery与按钮触发器旋转css 3d立方体

Question

我一直在尝试使用javascript中的按钮触发器（#leftBtn）旋转css 3-d立方体，但我不确定动画在css中是如何工作的。我尝试了这个jQuery函数，其中 #leftBtn 是我想用来旋转立方体的按钮，.renderLeft和.rotate是我试图在javascript中调用的类来旋转形状，#front 是我现在尝试旋转的立方体的正面/正方形（然后将其应用于其余面）。这是一个包含整个代码的 jsfiddle。

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

Answer 1

您正在使用jQuery，因此必须在脚本之前添加jQuery CDN

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