vue中通过css实现旋转地球

在Vue中，可以通过CSS动画来实现旋转地球的效果。以下是一个简单的例子：

1. 创建一个Vue组件：

<template>
  <div class="earth-container">
    <div class="earth"></div>
  </div>
</template>
 
<script>
export default {
  name: 'RotatingEarth'
}
</script>
 
<style scoped>
.earth-container {
  width: 200px;
  height: 200px;
  perspective: 200px;
  position: relative;
}
 
.earth {
  width: 100%;
  height: 100%;
  background-color: blue;
  position: absolute;
  border-radius: 50%;
  transform-origin: center center -100px;
  animation: rotate 10s linear infinite;
}
 
@keyframes rotate {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}
</style>

这个组件包括一个div.earth-container作为容器，它有一个视角（perspective），使得子元素看起来是3D旋转的。div.earth是代表地球的元素，它被放置在容器的中心，并且被赋予了一个动画，使其绕y轴旋转。

这个例子中的地球是一个简单的蓝色圆球，你可以通过调整背景图像来使它看起来更像地球。如果你想要更复杂的地球效果，比如带有云层、海洋和陆地的，你可能需要使用更复杂的CSS或者SVG来实现。