隨著Web技術(shù)的不斷發(fā)展，HTML5的出現(xiàn)讓我們可以更加輕松地實(shí)現(xiàn)網(wǎng)頁(yè)的效果。比如現(xiàn)在許多網(wǎng)頁(yè)中都加入了3D效果，其中就包括了3D相冊(cè)效果，接下來我們就來介紹一下HTML5制作3D相冊(cè)的代碼。
<html>
<head>
<meta charset="UTF-8">
<title>3D相冊(cè)</title>
<style>
#stage{
position:relative;
margin: auto;
width:860px;
height:450px;
perspective: 1000px;
overflow: hidden;
}
#carousel{
position:absolute;
width: 100%;
height:100%;
transform-style: preserve-3d;
animation: rotate 20s infinite linear;
}
.album{
position: absolute;
width: 300px;
height: 500px;
margin: auto;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.album img{
width: 300px;
height: 500px;
}
@keyframes rotate{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}
</style>
</head>
<body>
<div id="stage">
<div id="carousel">
<div class="album"><img src="photo1.jpg"></div>
<div class="album"><img src="photo2.jpg"></div>
<div class="album"><img src="photo3.jpg"></div>
<div class="album"><img src="photo4.jpg"></div>
<div class="album"><img src="photo5.jpg"></div>
</div>
</div>
</body>
</html>代碼中，我們定義了一個(gè)id為“stage”的div元素用于盛放3D相冊(cè)，其寬高分別為860px和450px。同時(shí)，我們?yōu)樵撛囟x了perspective屬性，與其內(nèi)部的子元素carousel配合使用，使得子元素從遠(yuǎn)處到近處透視效果更明顯。carousel元素是絕對(duì)定位的，其內(nèi)部的子元素album則需要定義其position屬性為absolute，以便將其從carousel中抽離出來，獲得更好的3D展示效果。代碼中采用了CSS3中的transform屬性來實(shí)現(xiàn)3D效果。同時(shí)，使用keyframes屬性結(jié)合animation屬性，讓carousel進(jìn)行自動(dòng)滾動(dòng)，從而獲得更好的展示效果。