演示图示例如下：

部分代码：

<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(&quot;images/css_globe_bg.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_diffuse.jpg&quot;); 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(&quot;images/css_globe_halo.png&quot;); 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>

完整资源包
旋转地球源代码（拿来即用）

HTML+CSS+JS-旋转地球相关推荐

  1. css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果

    旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示 设计思路与核心技术 旋转地球效果实现主要 ...

  2. vue中通过css实现旋转地球

    效果展示 飞机是会动的 实现步骤: 1.首先需要一个容器 外层div是底层的背景地球图 box是旋转的飞机  2.就是css部分的代码 <style lang="scss" ...

  3. three.js 带更新文字的旋转地球

    2019独角兽企业重金招聘Python工程师标准>>> 查看旋转地球效果 主要用到几个知识点 (1)显示文字是使用了three.js 的精灵(Sprite),精灵的文字方向始终面向相 ...

  4. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  5. HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白

    HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是 ...

  6. HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白

    HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员 ...

  7. HTML5七夕情人节表白网页(雪花爱心表白) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白

    HTML5七夕情人节表白网页❤雪花爱心❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表 ...

  8. HTML5七夕情人节表白网页_生日快乐粒子烟花(自定义文字)_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码

    HTML5七夕情人节表白网页❤生日快乐粒子烟花(自定义文字)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css ...

  9. HTML5七夕情人节表白网页(结婚倒计时) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白

    HTML5七夕情人节表白网页❤结婚倒计时❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白 ...

  10. HTML5七夕情人节表白网页(烂漫的空中散落的花瓣3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码

    HTML5七夕情人节表白网页❤烂漫的空中散落的花瓣3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表 ...

最新文章

  1. android 按照星期 时间 定时_Spring Boot实现定时任务的四种方式
  2. 一文告诉你 Java RMI 和 RPC 的区别！
  3. SQL View 的使用语法与原则
  4. md5与des算法有何不同_到底AI芯片和传统芯片有何区别？
  5. gPodder 3.4 发布，播客接收器
  6. Linux基础学习五：软件的相关安装（JDK,Tomcat,Yum）
  7. 【移动开发】SparseArray替代HashMap
  8. PHP 异常处理 throw new exception
  9. 使用akka框架编写RPC框架
  10. linux下verilog功能验证,Verilog 条件语句介绍
  11. LaTeX使用小结2
  12. Git客户端精简版Git-2.10.0-32-bit.exe
  13. VM打开虚拟机VMX进程已提前退出错误及解决办法
  14. Chrome OS 与 Android 的生死爱欲
  15. linux ln命令
  16. F 魏迟燕的自走棋(思维+贪心+并查集维护联通块/左部点配对边＜=2的匈牙利）
  17. Android ViewPage的使用（一）
  18. CSS页面布局及排版
  19. 线程通信和进程通信区别（线程进程区别）
  20. 科研诚信与学术规范_Mooc_2018_期末考试答案

热门文章

  1. USB硬件 键盘鼠标控制器 Lao-UKM V3.1 (增加高级客户功能)
  2. 开发餐饮点菜PDA设备记录一
  3. 计算机网络演变ppt,计算机网络演变与发展.ppt
  4. imgwarp.cpp:3143: error: (-215:Assertion failed) _src.total() ＞ 0 in function ‘warpPerspective‘
  5. 【Unity 31】 Unity中的文件读写， json，Get和Post，聚合数据接口的使用
  6. 微信小程序使用自定义字体的三种方法
  7. 刘一男词汇课(从flow到urgent)：理性的东西做的越充分，感性的东西就会更轻松
  8. idea springboot activities集成第一步
  9. mysql mof提权原理_Mof提权科普
  10. 直播电商软件开发，Android CardView实现圆角效果