css 3d月亮

要实现一个 3D 月亮的效果，可以使用 CSS 的 3D 变换和动画。首先，我们可以使用一个 div 元素作为月亮的容器，并设置它的宽高、背景颜色和边框圆角，代码如下：

<div class="moon"></div>

.moon {
  width: 200px;
  height: 200px;
  background-color: #f5deb3;
  border-radius: 50%;
}

接下来，我们需要将月亮向上抬起一些，可以使用 translateY() 函数实现。同时，为了让月亮看起来更加真实，我们可以给它添加一些阴影效果，代码如下：

.moon {
  width: 200px;
  height: 200px;
  background-color: #f5deb3;
  border-radius: 50%;
  transform: translateY(-50px);
  box-shadow: 0 0 40px #f5deb3;
}

现在，我们已经得到了一个平面的月亮，接下来要将它变成 3D 效果。为了实现这个效果，我们需要使用 CSS 的 3D 变换，包括 perspective、transform-style 和 transform，代码如下：

.moon-container {
  perspective: 800px;
}

.moon {
  width: 200px;
  height: 200px;
  background-color: #f5deb3;
  border-radius: 50%;
  transform-style: preserve-3d;
  transform: translateY(-50px) rotateX(60deg) rotateY(30deg);
  box-shadow: 0 0 40px #f5deb3;
}

在上面的代码中，我们为月亮的容器添加了 perspective 属性，用于设置透视距离。同时，将 transform-style 属性设置为 preserve-3d，表示要保持 3D 变换的效果。最后，我们通过 transform 属性设置了月亮的旋转角度，实现了 3D 效果。

最后，我们可以给月亮添加动画效果，让它旋转起来。代码如下：

.moon {
  width: 200px;
  height: 200px;
  background-color: #f5deb3;
  border-radius: 50%;
  transform-style: preserve-3d;
  transform: translateY(-50px) rotateX(60deg) rotateY(30deg);
  box-shadow: 0 0 40px #f5deb3;
  animation: rotate 10s infinite linear;
}

@keyframes rotate {
  from {
    transform: translateY(-50px) rotateX(60deg) rotateY(30deg);
  }
  to {
    transform: translateY(-50px) rotateX(60deg) rotateY(390deg);
  }
}

在上面的代码中，我们定义了一个名为 rotate 的动画，让月亮在 10 秒钟内沿着 Y 轴旋转一周。最后，通过将 animation 属性设置为 rotate，让月亮开始动画效果。