Javascript 对象旋转单击JS

我有一个问题，我不知道为什么，但脚本不工作。当我在对象中单击

时，他只能右转<代码>右转90度。

真棒
$（'.crossRotate'）。在（'click'，函数（）{
$（this.toggleClass（'active'）；
});
反对{
宽度：10%；
身高：10%；
}
.交叉旋转{
-webkit转换持续时间：3s；
-moz转换持续时间：3s；
-o-过渡持续时间：3s；
过渡时间：3s；
}
.crossRotate.active{
-webkit变换：旋转（360度）；
-moz变换：旋转（360度）；
-ms变换：旋转（360度）；
-o变换：旋转（360度）；
变换：旋转（360度）；
}
身体{
背景色：黑色；
}

您正在加载

$（'.crossRotate'）。在加载页面之前（'

），因此它将不会命中，并且您不会将其包装在

块中。请在页面底部加载JS，或将其包装在

onload

中。尝试：

<script>
    $(function(
        $('.crossRotate').on('click', function(){
          $(this).toggleClass('active');
        });
    ));
</script>

$（函数）(
$（'.crossRotate'）。在（'click'，function（）上{
$（this.toggleClass（'active'）；
});
));

您应该使用两个脚本标记，而不是在一个标记上使用src和content