html+css3d地球代码
时间: 2023-11-03 13:03:28 浏览: 73
HTML和CSS3D地球代码是用来创建一个可以在浏览器中呈现3D地球的网页。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 800px;
height: 800px;
perspective: 1000px;
}
#earth {
width: 400px;
height: 400px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(60deg) rotateY(30deg);
}
#earth .globe {
width: 100%;
height: 100%;
border-radius: 50%;
background-image: url('earth.jpg');
background-size: cover;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
#earth .marker {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
transform: rotateY(-90deg);
}
#earth .marker span {
display: block;
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: -10px;
left: -10px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="container">
<div id="earth">
<div class="globe"></div>
<div class="marker" style="transform: rotateY(45deg);">
<span></span>
</div>
<div class="marker" style="transform: rotateY(-45deg);">
<span></span>
</div>
</div>
</div>
</body>
</html>
```
这段代码创建了一个带有3D地球效果的网页。在CSS中,使用`perspective`属性设置了视角的距离。`#earth`容器是地球的容器,使用`transform-style`属性设置为`preserve-3d`,`transform`属性用于控制地球的旋转角度。`.globe`类设置地球的样式,包括大小、背景图片等。`.marker`类用于标记地球上的位置,通过`transform`属性来控制位置的旋转角度。`.marker span`用于创建标记的小圆点。
通过上述代码,我们可以在浏览器中创建一个3D地球的效果,可以通过修改`transform`属性的值来改变地球的旋转角度。