3D路徑圖效果越來越受到網(wǎng)頁設計師的歡迎，現(xiàn)在我們就來看看如何用HTML編寫一個簡單的3D路徑圖。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D路徑圖</title>
<style>
.container {
width: 600px;
height: 400px;
perspective: 1000px; /*設置3D透視效果*/
}
.path {
width: 80%;
height: 80%;
background-color: #fff;
position: relative;
margin: 0 auto;
transform-style: preserve-3d; /*設置內部元素的3D變換*/
}
.point {
width: 30px;
height: 30px;
background-color: #f00;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateZ(-200px); /*設置元素的3D位移*/
}
</style>
</head>
<body>
<div class="container">
<div class="path">
<div class="point"></div>
</div>
</div>
</body>
</html>代碼中，我們首先定義一個名為container的div，用于包裹整個3D路徑圖。接著定義一個名為path的div，作為路徑圖的主體部分，設置其寬高和背景色，并使用position:relative屬性讓內部元素的定位基準發(fā)生變化。同時，使用transform-style:preserve-3d屬性保持內部元素的3D變換效果。最后定義一個名為point的div，作為路徑圖上的點，使用position:absolute屬性設置其位置，并使用transform:translateZ(-200px)屬性將其移動到離我們更遠的位置。