HTML 的 H5 中增加了很多新的功能和特性，其中就包括了實現 3D 照片的功能。下面是一個簡單的例子：
<!DOCTYPE html>
<html>
<head>
<title>3D 照片</title>
<style>
.container {
perspective: 1000px;
}
.photo {
width: 300px;
height: 200px;
transform-style: preserve-3d;
transform: rotateY(45deg);
transition: 1s;
}
.photo:hover {
transform: rotateY(215deg);
}
.photo img {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="photo">
<img src="photo.jpg">
</div>
</div>
</body>
</html>這段代碼通過 perspective 屬性設置了透視距離，使得鼠標在懸停時能夠看到更多的 3D 效果。同時，使用 transform-style 屬性設置為 preserve-3d，讓圖片在進行 3D 變換時能夠保持原來的形狀，更加真實。通過 transform 屬性對圖片進行旋轉變換，并且在進行 hover 時能夠平滑過渡。最后，使用 backface-visibility 屬性設置為 hidden，避免在圖片翻轉時能夠看到背面的空白。
通過這些簡單的 CSS 屬性和偽元素，可以實現一個簡單的 3D 照片效果。在實際項目中，可以根據自己的需求來對 3D 照片進行更加復雜的構建，達到更加豐富、炫酷的效果。
上一篇css 多個字體調用
下一篇vue怎么轉uni