使用css和javascript旋转立方体时保持固定轴

在使用CSS和JavaScript旋转立方体时保持固定轴，可以通过以下步骤实现：

创建一个HTML元素，用于表示立方体。可以使用div元素，并为其添加一个唯一的ID，例如"cube"。
使用CSS将该元素设置为立方体的外观。可以通过设置宽度、高度、背景颜色等属性来定义立方体的外观。
使用CSS的transform属性将立方体进行旋转。可以使用rotateX、rotateY或rotateZ函数来分别绕X轴、Y轴或Z轴旋转立方体。
使用JavaScript监听窗口大小变化事件，以便在窗口大小改变时重新计算立方体的旋转轴。
在JavaScript中，可以使用CSS的transform-origin属性来设置立方体的旋转轴。通过计算立方体元素的中心点坐标，并将其作为transform-origin的值，可以实现固定轴的旋转效果。

以下是一个示例代码：

HTML:

<div id="cube"></div>

CSS:

#cube {
  width: 200px;
  height: 200px;
  background-color: red;
  transform-style: preserve-3d;
  transition: transform 1s;
}

JavaScript:

function updateCubeRotationAxis() {
  var cube = document.getElementById("cube");
  var rect = cube.getBoundingClientRect();
  var centerX = rect.left + rect.width / 2;
  var centerY = rect.top + rect.height / 2;
  cube.style.transformOrigin = centerX + "px " + centerY + "px";
}

window.addEventListener("resize", updateCubeRotationAxis);
updateCubeRotationAxis();

在上述代码中，我们使用CSS的transform-origin属性来设置立方体的旋转轴，通过监听窗口大小变化事件，并在窗口大小改变时重新计算立方体的旋转轴，从而实现了使用CSS和JavaScript旋转立方体时保持固定轴的效果。

请注意，上述代码仅为示例，实际应用中可能需要根据具体需求进行调整。