3D圣誕樹代碼 html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #2d3142;
margin: 0;
padding: 0;
}
#christmasTree {
width: 200px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotateX(-35deg);
perspective: 1000px;
}
.treeWrapper {
width: 200px;
height: 200px;
position: absolute;
}
.treeWrapper .treePiece {
border-radius: 20px;
background-color: #bfc0c0;
position: absolute;
transform-style: preserve-3d;
animation: rotate 5s ease-in-out infinite;
}
.treeWrapper .treePiece .front {
width: 200px;
height: 100px;
transform: translateZ(100px);
}
.treeWrapper .treePiece .back {
width: 200px;
height: 100px;
top: 100px;
transform: translateZ(-100px);
}
.treeWrapper.middle {
transform: rotateY(120deg);
}
.treeWrapper.right {
transform: rotateY(240deg);
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
33% {
transform: rotateY(120deg);
}
66% {
transform: rotateY(240deg);
}
100% {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<div id="christmasTree">
<div class="treeWrapper left">
<div class="treePiece">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="treePiece">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="treeWrapper middle">
<div class="treePiece">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="treePiece">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
<div class="treeWrapper right">
<div class="treePiece">
<div class="front"></div>
<div class="back"></div>
</div>
<div class="treePiece">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</div>
</body>
</html>以上是一個基礎的3D圣誕樹的html代碼。我們在style標簽中設置了背景色、圣誕樹的位置以及3D效果的實現。在body標簽中，通過div標簽嵌套的方式實現了圣誕樹的展示。每個圣誕樹的部件使用div標簽實現，通過CSS中的transform屬性來使其呈現3D效果。同時，我們還設置了一個animation動畫，讓圣誕樹的部件可以隨著時間自動旋轉。