使用CSS旋转照片中的球体

Rotation of the sphere in the photo with CSS

提问人:zahra shokrizadeh 提问时间:9/5/2023 最后编辑:zahra shokrizadeh 更新时间:9/5/2023 访问量:59

问:

我希望与维基百科相关的照片中的这个半球仅使用 HTML 和 CSS 代码向内旋转(就像地球的运动一样)。 我在下面发送的代码旋转了整个图像,它也是 360 度旋转,而不是向内旋转。

<img src="{% static "wiki.jpg"%}" alt="wiki.jpg">


img{
    border-radius: 100px;
    margin-top: 400px;

}
@keyframes img {
   0%{
    transform: rotate(0deg);
   }
   100%{
    transform: rotate(360deg);
   }
}

img{
    animation: img 20s ease-in-out  infinite;
}

图像

如果无法使用此图像执行此操作,我该如何设计类似的图像?

html django 动画 css-animations

评论

0赞 A Haworth 9/5/2023
您能解释一下“向内”轮换会是什么样子吗?此外,您正在使用的图像没有 3D 概念,您能说出旋转时额外信息(即球体的其余部分)来自哪里吗?
0赞 zahra 9/5/2023
@ 海沃氏 嗨...假设这个地球是太空中的地球。我想要一个类似于地球围绕这个球体的运动的运动。这个球体的后半球与这个半球相似。
0赞 A Haworth 9/5/2023
但是你给出的图像甚至不是整个半球,更不用说连续的(在球面上)图像了。
0赞 zahra 9/5/2023
@AHaworth 那么我怎么能有这样的动画呢???
0赞 A Haworth 9/5/2023
鉴于不完整的图像,您无法获得适当的动画

答: 暂无答案