css3加js做一个简单的3D行星运转效果实例代码

下面是一个简单的 3D 行星运转效果的实例代码，使用了 CSS3 和 JavaScript。

HTML 结构

<div class="container">
  <div class="planet"></div>
</div>

上述代码中，我们创建了一个容器 div 元素，用于容纳行星。我们在容器中创建了一个 div 元素，用于表示行星。

CSS 样式

.container {
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.planet {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffcc00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(0deg) rotateZ(0deg);
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateY(360deg) rotateZ(360deg);
  }
}

上述代码中，我们将容器的宽度和高度设置为 300px，以使其具有一定的大小。我们使用 perspective 属性来定义 3D 效果的视角。我们将行星的宽度和高度设置为 50px，以使其具有一定的大小。我们使用 border-radius 属性来定义行星的圆角。我们将其 position 属性设置为 absolute，以使其相对于容器进行定位。我们使用 transform 属性来定义行星的位置和旋转角度。我们使用 animation 属性来定义行星的旋转动画。我们使用 @keyframes 规则来定义旋转动画的关键帧。

JavaScript 代码

var planet = document.querySelector('.planet');
var mouseX = 0;
var mouseY = 0;

document.addEventListener('mousemove', function(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
});

setInterval(function() {
  var centerX = window.innerWidth / 2;
  var centerY = window.innerHeight / 2;
  var deltaX = mouseX - centerX;
  var deltaY = mouseY - centerY;
  var percentX = deltaX / centerX;
  var percentY = deltaY / centerY;
  var degY = percentX * 180;
  var degZ = -percentY * 180;
  planet.style.transform = 'translate(-50%, -50%) rotateY(' + degY + 'deg) rotateZ(' + degZ + 'deg)';
}, 10);

上述代码中，我们使用 document.querySelector() 方法获取行星元素。我们使用 document.addEventListener() 方法来监听鼠标移动事件，以获取鼠标的位置。我们使用 setInterval() 方法来定时更新行星的位置和旋转角度。我们计算鼠标相对于窗口中心的偏移量，并将其转换为旋转角度。我们使用行星元素的 style.transform 属性来设置行星的位置和旋转角度。