Jquery HTML和CSS旋转三维立方体

我已经创建了一个css立方体，并让它旋转。我希望在按下按钮时能够旋转立方体。这是我的密码。当我按下按钮时，.rotate类没有切换。我错在哪里？您也可以在此处查看代码-

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“部分”）。切换类别（“旋转”）；
});
});
.包裹{
透视图：800px；
透视原点：50%100px；
}
.立方体{
保证金：0自动；
位置：相对位置；
宽度：200px；
变换样式：保留-3d；
}
.cube div{
背景：rgba（189,25400,0.3）；
盒影：嵌入0.20px rgba（125125,0.9）；
位置：绝对位置；
宽度：200px；
高度：200px；
}
.回来{
变换：translateZ（-100px）旋转（180度）；
}
.对{
变换：旋转（-270度）translateX（100像素）；
变换原点：右上角；
}
.左{
变换：旋转（270度）translateX（-100px）；
变换原点：左中；
}
.顶{
变换：rotateX（-90度）translateY（-100px）；
变换原点：顶部中心；
}
.底部{
变换：旋转（90度）平移（100像素）；
变换原点：底部中心；
}
.前线{
变换：translateZ（100px）；
}
@关键帧旋转{
来自{transform:rotateY（0）；}
到{变换：旋转（-360度）；}
}
.轮换{
动画：旋转1s1线性；
}

您的脚本插入错误，您需要一个标记来加载外部javascript，另一个标记来执行代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
    $("section").toggleClass("rotate");
});
});
</script>

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“部分”）。切换类别（“旋转”）；
});
});

您的代码应该在一个单独的脚本标记中，要访问id上的按钮，您需要在jQuery中的id前面加一个#

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
    $("section").toggleClass("rotate");
});
});
</script>
<style>

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（“部分”）。切换类别（“旋转”）；
});
});

谢谢。但是现在，当我添加了两个按钮时，两个按钮都不能一起工作。只需第一次按下，它们就可以正常工作，但在那之后，右键就可以同时向左和向右旋转。另外，当我旋转立方体时，我不希望背面变为黑色，我希望它移动到侧面。我脸上的“你好”这个词也一样。这是我的密码-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
    $("section").toggleClass("rotate");
});
});
</script>
<style>