点击Object无法实现90度右转：JS旋转脚本失效求助

我来帮你排查并修复这个旋转脚本的问题，你的代码里有几个关键问题导致功能失效，咱们一步步来解决：

问题分析 #

• jQuery脚本执行时机错误：你把自定义的点击事件代码写在了引入jQuery的同一个<script>标签里，带src属性的<script>标签内部的代码不会被执行；就算能执行，这时候jQuery还没加载完成，绑定事件也会失败。
• 目标元素缺少指定类名：你的事件绑定在.crossRotate类上，但页面里的<object>元素并没有添加这个类，导致事件根本没绑定到目标元素上。
• 旋转角度不符合需求：你当前设置的是旋转360度，而预期是向右旋转90度。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Awesome</title>
    <link rel="stylesheet" href="style2.css">
    <!-- 先单独引入jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- 自定义脚本单独写，确保jQuery已加载完成 -->
    <script>
        $(document).ready(function() {
            $('.crossRotate').on('click', function () {
                $(this).toggleClass('active');
            });
        });
    </script>
    <style>
        object {
            width: 10%;
            height: 10%;
            /* 可选：显式设置旋转原点，确保元素围绕中心旋转，避免兼容性问题 */
            transform-origin: center center;
        }
        .crossRotate {
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;
            transition-duration: 3s;
        }
        .crossRotate.active {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        body {
            background-color: black;
        }
    </style>
</head>
<body>
    <!-- 给object元素添加crossRotate类，让事件能绑定到它身上 -->
    <object class="crossRotate" data="https://i.pinimg.com/originals/81/6d/a5/816da533638aee63cfbd315ea24cccbd.jpg"></object>
</body>
</html>

关键修复点说明 #

1. 分离脚本引入与自定义代码：把引入jQuery的标签和自定义事件代码分开，并用$(document).ready()包裹事件绑定逻辑，确保DOM和jQuery都加载完成后再执行脚本，避免找不到元素的问题。
2. 给目标元素添加类名：给<object>加上crossRotate类，这样点击事件才能正确绑定到它上面。
3. 调整旋转角度：将.crossRotate.active里的rotate(360deg)改成rotate(90deg)，完全匹配你“向右旋转90度”的需求。
4. 可选优化旋转原点：添加transform-origin: center center，显式指定元素围绕中心旋转，虽然默认值也是中心，但显式设置能避免部分浏览器的兼容性异常。

修改完成后，点击object元素就会平滑向右旋转90度，再次点击会旋转回初始状态（因为用了toggleClass切换类名）。

内容的提问来源于stack exchange，提问作者Abel11