HTML球體代碼3D
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML球體代碼3D</title>
<style>
#sphere {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(90deg) rotateY(0deg) rotateZ(0deg); /* 初始位置 */
animation: spin 6s linear infinite; /* 旋轉動畫 */
background: radial-gradient(circle at 25% 25%, #fff, #000); /* 背景顏色 */
border-radius: 50%; /* 邊框圓角 */
box-shadow: 0 0 20px #000; /* 邊框陰影 */
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
to {
transform: translate(-50%, -50%) rotateX(90deg) rotateY(360deg) rotateZ(180deg);
}
}
</style>
</head>
<body>
<div id="sphere"></div>
</body>
</html>說明：
- 將整個球定義為一個div元素，使用id屬性為其命名為"sphere"。
- 將div元素設置為絕對定位，寬度和高度為200px，垂直水平居中。初始位置為仰面朝上。
- 定義一個名為spin的旋轉動畫，持續時間為6秒，線性變化，無限循環播放。從仰面朝上的位置開始旋轉，繞Y軸旋轉一周，繞Z軸旋轉180度，最終轉到側面朝前的位置。
- 設置div元素的背景，使用徑向漸變，圓心位置為(25%, 25%)，顏色從白色到黑色漸變。
- 設置div元素的弧度為50%，使其呈現圓球形狀。
- 設置div元素的陰影，使其看上去有厚度感。