以下是一个使用 HTML、CSS 和 JavaScript 实现 3D 地球的示例代码：
html
<!DOCTYPE html>
<html>
<head>
<title>3D Earth</title>
<style>
body {
margin: 0;
padding: 0;
perspective: 1000px;
}
#earth {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
border-radius: 50%;
background: url('https://mippu.qunapu.com/upload/2023/05/20230515115327168412280759751.png');
transform-style: preserve-3d;
animation: earth 10s linear infinite;
}
#earth:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('earthbump.jpg');
transform: translateZ(1px);
pointer-events: none;
}
#earth:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin: -100px 0 0 -100px;
border-radius: 50%;
background: url('earthspec.jpg');
transform: translateZ(-1px);
pointer-events: none;
}
@keyframes earth {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="earth"></div>
<script>
var earth = document.getElementById('earth');
document.addEventListener('mousemove', function(event) {
var x = event.clientX - window.innerWidth / 2;
var y = event.clientY - window.innerHeight / 2;
earth.style.transform = 'rotateY(' + x / 10 + 'deg) rotateX(' + -y / 10 + 'deg)';
});
</script>
</body>
</html>该代码使用了 HTML、CSS 和 JavaScript 语言来实现。其中的元素和语法如下：
- perspective: 设置元素的透视视图。
- transform-style: 用于指定元素的子元素是否应沿着三维空间中的本地坐标系进行变换。在本例中，用来进行 3D 变换。
- before 和 after: CSS 伪元素，用于在 HTML 元素的前面或后面添加虚拟元素。在本例中，用前置伪元素添加地球表面的凸纹和后置伪元素添加地球表面的光亮效果。
- background: 用于设置元素的背景图像。
- transform: 用于对元素进行旋转、缩放、偏移等变换操作。在本例中，用来进行 3D 变换。
- pointer-events: CSS 属性，控制 HTML 元素如何响应鼠标事件。在本例中，将透明的凸纹元素设为“不接受鼠标事件”。
- addEventListener: JavaScript 方法，用于为文档对象添加事件监听器。
- clientX/clientY: 鼠标事件中的属性，表示鼠标指针在浏览器窗口中的水平/垂直坐标。
- innerWidth/innerHeight: 用于获取浏览器窗口的内部宽度和高度。
- window: 全局对象，代表当前打开的浏览器窗口或选项卡。
总之，使用 HTML、CSS 和 JavaScript 实现 3D 地球，用到的主要技术是透视、变换、伪元素和事件监听等。通过这些技术的灵活组合，可以呈现出逼真的 3D 地球效果，提供更丰富的交互和用户体验。
专题推荐：