html3d地球代碼示例代碼

Cloud computing and code 2023年05月15日 11:18 926 visitor

以下是一個使用 HTML、CSS 和 JavaScript 實現 3D 地球的示例代碼：

html3d地球代碼示例代碼第1张

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 地球效果，提供更豐富的交互和用戶體驗。