演示图示例如下：
部分代码：
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>旋转地球</title>
<style media="" >
html, body {
position: absolute;
width: 100%;
height: 100%;
margin: 0 0;
overflow: hidden;
font-family: 'Lato', sans-serif;
background-color: #000;
color: #fff;
}
.world-bg {
position: absolute;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-size: cover;
}
.world-globe-halo {
position: absolute;
left: 50%;
top: 50%;
width: 730px;
height: 715px;
margin-left: -368px;
margin-top: -350px;
}
</style>
</head>
<body>
<!--旋转地区主体部分-->
<div class="world">
<!--背景图-->
<div class="world-bg" style="background-image: url("images/css_globe_bg.jpg"); transform: scale3d(1, 1, 1);"></div>
<div class="world-globe" style="transform: scale3d(1, 1, 1);">
<div class="world-globe-pole" style="display: block;"></div>
<div class="world-globe-doms-container">
<!--地球平面图-->
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -684px -66px; transform: matrix3d(0.103976, 0.05095, 0, -0.000118488, -0.0233234, 1.68858, 0, -0.00556922, 0, 0, 1, 0, 87.9795, -251.501, 0, 1);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -798px -66px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -912px -66px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1026px -66px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1140px -66px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1254px -66px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1368px -66px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1482px -66px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: 0px -132px; transform: matrix3d(0.0998542, 0.024029, 0, -0.000254985, 0.249287, 1.50468, 0, -0.00480842, 0, 0, 1, 0, -155.345, -217.15, 0, 1);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -114px -132px; transform: matrix3d(0.364089, 0.0203942, 0, -0.000185331, -0.00975933, 1.29281, 0, -0.00351498, 0, 0, 1, 0, -149.538, -221.33, 0, 1);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -228px -132px; transform: matrix3d(0.569228, 0.0204247, 0, -0.000152155, -0.00907736, 1.2869, 0, -0.00347483, 0, 0, 1, 0, -112.802, -223.992, 0, 1);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -342px -132px; transform: matrix3d(0.656683, 0.0227198, 0, -0.000111616, -0.00345574, 1.28731, 0, -0.00347077, 0, 0, 1, 0, -51.4404, -225.647, 0, 1);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -456px -132px; transform: matrix3d(0.607505, 0.0302625, 0, -9.0494e-05, 0.0072023, 1.27856, 0, -0.00342553, 0, 0, 1, 0, 21.0123, -225.903, 0, 1);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -570px -132px; transform: matrix3d(0.420902, 0.0498345, 0, -0.000141226, 0.0305073, 1.25375, 0, -0.00330978, 0, 0, 1, 0, 88.6277, -224.607, 0, 1);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -684px -132px; transform: matrix3d(0.158592, 0.048882, 0, -9.5929e-05, -0.0309885, 1.3145, 0, -0.0036882, 0, 0, 1, 0, 136.927, -222.042, 0, 1);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -798px -132px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -912px -132px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1026px -132px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1140px -132px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1026px -594px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1140px -594px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1254px -594px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1368px -594px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: -1482px -594px; transform: translate3d(-8192px, 0px, 0px);"></div>
<div style="position: absolute; width: 114px; height: 66px; overflow: hidden; transform-origin: 0px 0px 0px; background-image: url("images/css_globe_diffuse.jpg"); background-position: 0px -660px; transform: matrix3d(0.143888, -0.0870021, 0, -0.000547562, 0.285009, 1.7573, 0, 0.00522738, 0, 0, 1, 0, -157.693, 215.333, 0, 1);"></div>
<!--白色光圈-->
<div class="world-globe-halo" style="background-image: url("images/css_globe_halo.png"); display: block;"></div>
</div>
</div>
<!-- partial -->
<script src="dat.gui.min.js"></script>
<script src="Stats.js"></script>
<script src="css_globe_PerspectiveTransform.js"></script>
<script src="script.js"></script>
</body>
</html>
完整资源包
旋转地球源代码（拿来即用）
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
