3D代碼HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D代碼演示</title>
<style>
body {
margin: 0;
padding: 0;
perspective: 1000px;
}
#cube {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
#cube .face {
position: absolute;
width: 150px;
height: 150px;
background-color: rgba(0,0,0,0.2);
border: 2px solid white;
color: white;
font-size: 48px;
text-align: center;
line-height: 150px;
font-family: sans-serif;
}
#cube #front {
transform: translateZ(75px);
}
#cube #back {
transform: translateZ(-75px) rotateY(180deg);
}
#cube #left {
transform: translateX(-75px) rotateY(-90deg);
}
#cube #right {
transform: translateX(75px) rotateY(90deg);
}
#cube #top {
transform: translateY(-75px) rotateX(90deg);
}
#cube #bottom {
transform: translateY(75px) rotateX(-90deg);
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotateX(0deg) rotateY(0deg);
}
25% {
transform: translate(-50%, -50%) rotateX(30deg) rotateY(30deg);
}
50% {
transform: translate(-50%, -50%) rotateX(60deg) rotateY(60deg);
}
75% {
transform: translate(-50%, -50%) rotateX(90deg) rotateY(90deg);
}
100% {
transform: translate(-50%, -50%) rotateX(120deg) rotateY(120deg);
}
}
</style>
</head>
<body>
<div id="cube">
<div id="front" class="face">前</div>
<div id="back" class="face">后</div>
<div id="left" class="face">左</div>
<div id="right" class="face">右</div>
<div id="top" class="face">上</div>
<div id="bottom" class="face">下</div>
</div>
</body>
</html>上述代碼演示了一個基本的3D立方體效果，使用了CSS3的3D變換和動畫屬性。需要注意的是，要在HTML中設置透視屬性以實現3D效果。