如何用HTML和CSS实现维基百科半球图片向内自转效果？

问题分析 #

你当前的代码是让整个图片做360°旋转，这和地球自转的效果不符——地球自转是表面纹理横向移动，而非整个球体翻转。要实现目标效果，需要通过背景图滚动来模拟，而非旋转整个元素。

修正后的代码实现 #

HTML #

<div class="earth-hemisphere"></div>

CSS #

.earth-hemisphere {
  width: 200px; /* 根据需求调整尺寸 */
  height: 200px;
  border-radius: 50%; /* 做成圆形半球容器 */
  background-image: url("wiki.jpg"); /* 替换为你的图片路径 */
  background-size: auto 100%; /* 让背景图高度适配容器，宽度自动拉伸 */
  background-repeat: repeat-x; /* 横向重复背景，保证滚动无缝 */
  animation: rotate-hemisphere 20s linear infinite; /* 线性匀速动画 */
}

@keyframes rotate-hemisphere {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1000px; /* 数值等于背景图的宽度，确保滚动完整 */
  }
}

关键说明 #

• 用div容器替代img标签：因为需要控制背景图的滚动，img无法直接实现背景重复滚动的效果。
• background-repeat: repeat-x：让图片在水平方向重复排列，滚动时不会出现断层。
• 动画修改background-position-x：通过横向移动背景位置，模拟地球表面自转的视觉效果，而非旋转整个容器。

图片适配要求 #

如果当前提供的半球图片无法实现无缝滚动，需要重新设计图片：

• 将半球的表面纹理（陆地、海洋）制作成横向无缝拼接的长图：把相同的半球纹理水平重复排列，确保左右边缘衔接自然，这样滚动时不会出现明显的拼接痕迹。
• 图片高度需匹配容器的高度，宽度可以根据需要延长，保证滚动的连续性。

内容的提问来源于stack exchange，提问作者zahra