html画立体地球，以下是一个简单的HTML和CSS代码，用于创建一个旋转的立体地球：
<!DOCTYPE html>
<html>
<head>
<title>html画立体地球</title>
<style>
.globe {
width: 200px;
height: 200px;
perspective: 600px;
margin: 50px auto;
}
.earth {
width: 100%;
height: 100%;
background-image: url('https://mippu.qunapu.com/upload/2023/05/20230515115327168412280759751.png');
background-size: cover;
border-radius: 50%;
position: relative;
animation: spin 10s linear infinite;
transform-style: preserve-3d;
}
@keyframes spin {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
100% {
transform: rotateY(360deg) rotateX(360deg);
}
}
</style>
</head>
<body>
<div class="globe">
<div class="earth"></div>
</div>
</body>
</html>代码解释：
1. <div class="globe"></div>用于创建一个包含地球的div容器。
2. <div class="earth"></div>用于创建地球，并在CSS中进行样式处理。
3. 在.globe中设置了透视（perspective）属性为600px，这是创建3D效果的必要条件。
4. .earth中设置了宽度（width）和高度（height）为100%。
5. 添加了一个地球贴图（background-image）并将大小设置为cover，使其填充整个div。
6. 将边框半径（border-radius）设置为50%，这样可以把地球形状变成一个圆形。
7. 为了实现旋转效果，使用CSS动画并为它命名为“spin”。在动画中，我们让地球沿着Y轴和X轴旋转360度。
8. 最后，我们使用transform-style属性对容器和地球进行3D变换。
通过这些代码，我们可以生成在浏览器中旋转的立体地球。
效果载图：
专题推荐：