javascript - 如何使用带有按钮触发器的 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>