此示例使用 HTML + Canvas 實現滑動拼圖驗證碼。Canvas繪制帶隨機缺口的背景，獨立滑塊按鈕監聽滑鼠/觸摸拖拽，實時將滑塊位置映射到Ca...
html畫立體地球，旋轉的立體地球
Cloud computing and code
2023年05月15日 18:51 946
visitor
html畫立體地球，以下是一個簡單的HTML和CSS代碼，用於創建一個旋轉的立體地球：
<!DOCTYPE html>
<html>
<head>
<title>html畫立體地球</title>
<style>
.globe {
width: 200px;
height: 200px;
perspective: 600px;
margin: 50px auto;
}
.earth {
width: 100%;
height: 100%;
background-image: url('https://mippu.qunapu.com/upload/2023/05/20230515115327168412280759751.png');
background-size: cover;
border-radius: 50%;
position: relative;
animation: spin 10s linear infinite;
transform-style: preserve-3d;
}
@keyframes spin {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
100% {
transform: rotateY(360deg) rotateX(360deg);
}
}
</style>
</head>
<body>
<div class="globe">
<div class="earth"></div>
</div>
</body>
</html>代碼解釋：
1. <div class="globe"></div>用於創建一個包含地球的div容器。
2. <div class="earth"></div>用於創建地球，並在CSS中進行樣式處理。
3. 在.globe中設置了透視（perspective）屬性為600px，這是創建3D效果的必要條件。
4. .earth中設置了寬度（width）和高度（height）為100%。
5. 添加了一個地球貼圖（background-image）並將大小設置為cover，使其填充整個div。
6. 將邊框半徑（border-radius）設置為50%，這樣可以把地球形狀變成一個圓形。
7. 為了實現旋轉效果，使用CSS動畫並為它命名為“spin”。在動畫中，我們讓地球沿著Y軸和X軸旋轉360度。
8. 最後，我們使用transform-style屬性對容器和地球進行3D變換。
通過這些代碼，我們可以生成在瀏覽器中旋轉的立體地球。
效果載圖：
標籤： html畫立體地球
相關文章
