我明白你现在的问题啦——单独绕X或Y轴旋转没问题，但同时转就失效，核心原因是你写了两个独立的mousemove事件处理函数，而且每次只给transform设置单个旋转属性，这会直接覆盖掉之前的旋转效果。

解决方案：合并事件+叠加变换 #

我们需要把两个旋转逻辑放到同一个鼠标移动事件里，然后将rotateX和rotateY合并到同一个transform属性中（CSS允许用空格分隔多个变换，它们会同时生效）。

以下是修正后的完整代码：

var $document = $(document);
var $cube = $(".cube"); // 提前缓存DOM元素，提升性能

$document.mousemove(function(e) {
    // 计算Y轴旋转（对应鼠标水平位置，控制左右转向）
    var widthScale = $document.width() / 60;
    var rotateY = (e.pageX / widthScale) - 90; // 调整初始值，让屏幕中心时旋转为0

    // 计算X轴旋转（对应鼠标垂直位置，控制上下转向）
    var heightScale = $document.height() / 60;
    var rotateX = 90 - (e.pageY / heightScale); // 同理调整初始值

    // 同时应用两个旋转，叠加到同一个transform属性中
    $cube.css("transform", `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
});

关键细节说明 #

• 缓存DOM元素：提前把.cube元素存到变量里，避免每次鼠标移动都重新查询DOM，提升性能。
• 合并事件处理：一个mousemove事件就能同时计算两个轴的旋转值，不会出现属性覆盖的问题。
• 旋转初始值调整：通过-90和90-的计算，让鼠标处于屏幕中心时，元素的旋转角度为0，交互更自然。
• 叠加变换规则：CSS的transform支持多个变换叠加，用空格分隔即可，所有变换会同时作用于元素。

额外优化建议 #

如果想让旋转更平滑，可以给.cube加个过渡动画：

.cube {
    transition: transform 0.1s ease; /* 让旋转过程更丝滑 */
    transform-style: preserve-3d; /* 如果是3D立方体，必须开启这个属性才能显示正确的3D效果 */
}

还可以用Math.min()和Math.max()限制旋转范围，避免元素过度翻转：

// 限制旋转角度在±60度之间
rotateX = Math.max(Math.min(rotateX, 60), -60);
rotateY = Math.max(Math.min(rotateY, 60), -60);

内容的提问来源于stack exchange，提问作者Åsmund Sollihøgda