以下是一段使用HTML編寫的3D網頁代碼：
在這個HTML網頁中，我將展示如何使用CSS 3D效果和JavaScript創建一個簡單的3D場景。
<!DOCTYPE html>
<html>
<head>
<title>3D場景演示</title>
<style>
.scene {
width: 800px;
height: 500px;
perspective: 1000px;
}
.box {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
transform-style: preserve-3d;
animation: rotate 5s ease-in-out infinite;
}
.box .front,
.box .back,
.box .left,
.box .right,
.box .bottom,
.box .top {
position: absolute;
width: 200px;
height: 200px;
}
.box .front {
background-color: red;
transform: translateZ(100px);
}
.box .back {
background-color: green;
transform: rotateY(180deg) translateZ(100px);
}
.box .left {
background-color: blue;
transform: rotateY(-90deg) translateZ(100px);
}
.box .right {
background-color: yellow;
transform: rotateY(90deg) translateZ(100px);
}
.box .bottom {
background-color: purple;
transform: rotateX(90deg) translateZ(100px);
}
.box .top {
background-color: orange;
transform: rotateX(-90deg) translateZ(100px);
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="scene">
<div class="box">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="top"></div>
</div>
</div>
<script>
document.addEventListener("mousemove", function(event) {
var x = event.clientX / window.innerWidth;
var y = event.clientY / window.innerHeight;
var box = document.querySelector(".box");
box.style.transform = "rotateX(" + (y * 10) + "deg) rotateY(" + (x * 10) + "deg)";
});
</script>
</body>
</html>以上代碼中，我們創建了一個名為"scene"的div作為整個3D場景的容器，并將perspective屬性設置為1000px。在此div中，我們創建了一個稱為"box"的div，它是我們的3D盒子。我們使用transform-style屬性將其設置為保留3D，這意味著子元素也將遵循3D轉換。我們還為盒子設置了一個動畫，使用rotate函數使其繞y軸旋轉。
接下來，我們為每個面創建一個子div，它們將使用不同的背景顏色來區分彼此。在這里，我們使用translateZ和rotate函數來定位和旋轉每個面。
最后，我們使用JavaScript監聽鼠標移動事件，并根據鼠標的位置計算x和y軸旋轉的度數，從而實現盒子的交互性。上一篇疏血通會導致CSS增高嗎
下一篇css圖片定位左上角