我們使用了CSS的perspective屬性來創(chuàng)建3D空間感，transform屬性中的rotateX和rotateY函數(shù)來旋轉(zhuǎn)文字，使其具有3D效果。我們還添加了一個簡單的float動畫，讓文字在垂直方向上稍微浮動，增加動態(tài)感。text-shadow屬性為文字添加了陰影，增強(qiáng)了立體感。
請將此代碼保存為HTML和CSS文件，并在瀏覽器中打開HTML文件查看效果。您可以根據(jù)需要調(diào)整文字內(nèi)容、顏色、大小、旋轉(zhuǎn)角度以及動畫效果。
如果您有特定的3D文字效果圖片作為參考，您可能需要更復(fù)雜的CSS樣式或使用WebGL技術(shù)通過JavaScript庫（如Three.js）來實現(xiàn)。這通常涉及到更高級的3D變換和渲染技術(shù)。
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>3D 文字效果</title>
<style>
body {
perspective: 1200px; /* 設(shè)置3D視角 */
font-family: ‘Arial’, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.three-d-text {
color: #333;
text-align: center;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transform: rotateX(30deg) rotateY(-10deg); /* 3D旋轉(zhuǎn) /
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); / 文字陰影 /
animation: float 3s ease-in-out infinite; / 文字浮動動畫 */
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotateX(30deg) rotateY(-10deg);
}
50% {
transform: translateY(-10px) rotateX(30deg) rotateY(-10deg);
}
}
</style>
</head>
<body>
<div class=“three-d-text”>3D 文字效果</div>
</body>
</html>