3D旋转相册
*{
padding:0
margin:0
}
body,
html{
height:100%
}
/*背景图片在这里设置*/
body{
background-image:url("images/beijing.jpg")
background-size:100%100%
}
#box{
width:280px
height:400px
position:fixed
left:0
right:0
top:0
bottom:0
margin:auto
transform-style:preserve-3d
transform:rotateX(0deg)rotateY(0deg)
animation:go45slinearinfinite
}
#boximg{
width:280px
height:400px
position:absolute
left:0
top:0
}
#boximg:nth-child(1){
transform:rotateY(0deg)translateZ(650px)
}
#boximg:nth-child(2){
transform:rotateY(36deg)translateZ(650px)
}
#boximg:nth-child(3){
transform:rotateY(72deg)translateZ(650px)
}
#boximg:nth-child(4){
transform:rotateY(108deg)translateZ(650px)
}
#boximg:nth-child(5){
transform:rotateY(144deg)translateZ(650px)
}
#boximg:nth-child(6){
transform:rotateY(180deg)translateZ(650px)
}
#boximg:nth-child(7){
transform:rotateY(216deg)translateZ(650px)
}
#boximg:nth-child(8){
transform:rotateY(252deg)translateZ(650px)
}
#boximg:nth-child(9){
transform:rotateY(288deg)translateZ(650px)
}
#boximg:nth-child(10){
transform:rotateY(324deg)translateZ(650px)
}
@keyframesgo{
0%{
transform:rotateX(0deg)rotateY(0deg)
}
25%{
transform:rotateX(20deg)rotateY(180deg)
}
50%{
transform:rotateX(0deg)rotateY(360deg)
}
75%{
transform:rotateX(-20deg)rotateY(540deg)
}
100%{
transform:rotateX(0deg)rotateY(720deg)
}
}
images/1.jpg
images/2.jpg
images/3.jpg
images/4.jpg
images/5.jpg
images/6.jpg
images/7.jpg
images/8.jpg
images/9.jpg
images/10.jpg
html相册就是把一组图片放到一个固定位置轮番滚动查看，一般是类似于qq相册的功能。
代码如下：
<script language="javascript">
//定义img图库
var img = ["","images/1.gif","images/2.gif","images/3.gif","images/4.gif"]//最前面留一个空白位置
//轮番显示
function show(op){
if(Number(op)){
// 取得对应的图片
document.getElementById("img1").src=img[op]
}
}
</script>
//设置图片显示样式
<style type="text/css">
li{
float:left
height:15px
background-color:#FF66FF
border:1px #00FFFF dotted
line-height:15px
}
a{
color:#00FFFF
text-decoration:none
}
</style>
以下是html代码，设置一个img控件，长和宽都是50个像素
<img src="images/1.gif" id="img1" width="50" height="50" />
<ul style="list-style-type:nonewidth:200px">
<li><a href="#" onclick="show(1)">1</a></li><!--点击显示第一张图-->
<li><a href="#" onclick="show(2)">2</a></li><!--点击显示第二张图-->
<li><a href="#" onclick="show(3)">3</a></li><!--点击显示第三张图-->
<li><a href="#" onclick="show(4)">4</a></li><!--点击显示第四张图-->
</ul>
