【炫酷旋转相册----使⽤html书写。附全部源代码】⽬录
图⽚素材已经上传到资源⾥⾯，需要的朋友可以去下载。更改图⽚即可显⽰你⼥朋友的照⽚哦！
全部源代码
酷炫旋转相册.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>炫酷旋转相册</title>
<style>
body
{
margin:0;
background:#000;
}
#wrap
{
width:300px;
height:400px;
position: relative;
margin: 300px auto;
-webkit-perspective:3000px;
-
moz-perspective:3000px;
-ms-transform:perspective(3000px);
-ms-perspective:3000px;
}
#head
{
width:100%;
height:100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation:donghua 15s linear 0s infinite;
-
moz-transform-style: preserve-3d;
-moz-animation:donghua 15s linear 0s infinite;
-ms-transform-style: preserve-3d;
-ms-animation:donghua 25s linear 0s infinite;
}
#head div
{
position: absolute;
top:0;
left:0;
width:300px;
height:400px;
border:1px solid #000
text-align: center;
line-height:100px;
}
#head div:nth-child(1)
{
-webkit-transform:rotateY(0deg)translateZ(400px);
-moz-transform:rotateY(0deg)translateZ(400px);
-ms-transform:rotateY(0deg)translateZ(400px);
background:url(images/01.gif);
background-size:cover;
}
#head div:nth-child(2)
{
-webkit-transform:rotateY(36deg)translateZ(500px);
-moz-transform:rotateY(36deg)translateZ(500px);
-ms-transform:rotateY(36deg)translateZ(500px);
background:url(images/02.jpg);
background-size:cover;
}
}
#head div:nth-child(3)
{
-webkit-transform:rotateY(72deg)translateZ(400px); -moz-transform:rotateY(72deg)translateZ(400px);
-ms-transform:rotateY(72deg)translateZ(400px); background:url(images/03.gif);
background-size:cover;
}
#head div:nth-child(4)
{
-webkit-transform:rotateY(108deg)translateZ(500px); -moz-transform:rotateY(108deg)translateZ(500px); -ms-transform:rotateY(108deg)translateZ(500px); background:url(images/04.jpg);
html导航源码
background-size:cover;
}
#head div:nth-child(5)
{
-webkit-transform:rotateY(144deg)translateZ(400px); -moz-transform:rotateY(144deg)translateZ(400px); -ms-transform:rotateY(144deg)translateZ(400px); background:url(images/05.gif);
background-size:cover;
}
#head div:nth-child(6)
{
-webkit-transform:rotateY(180deg)translateZ(500px); -moz-transform:rotateY(180deg)translateZ(500
px); -ms-transform:rotateY(180deg)translateZ(500px); background:url(images/06.jpg);
background-size:cover;
}
#head div:nth-child(7)
{
-webkit-transform:rotateY(216deg)translateZ(400px); -moz-transform:rotateY(216deg)translateZ(400px); -ms-transform:rotateY(216deg)translateZ(400px); background:url(images/07.gif);
background-size:cover;
}
#head div:nth-child(8)
{
-webkit-transform:rotateY(252deg)translateZ(500px); -moz-transform:rotateY(252deg)translateZ(500px); -ms-transform:rotateY(252deg)translateZ(500px); background:url(images/08.jpg);
background-size:cover;
}
#head div:nth-child(9)
{
-webkit-transform:rotateY(288deg)translateZ(400px); -moz-transform:rotateY(288deg)translateZ(400px); -ms-transform:rotateY(288deg)translateZ(400px); background:url(images/09.gif);
background-size:cover;
}
#head div:nth-child(10)
{
-webkit-transform:rotateY(324deg)translateZ(500px); -moz-transform:rotateY(324deg)translateZ(500px); -ms-transform:rotateY(324deg)translateZ(500px); background:url(images/10.jpg);
background-size:cover;
}
@-webkit-keyframes donghua{
0%{transform:rotateX(5deg)rotateY(360deg)}
50%{transform:rotateX(-5deg)rotateY(180deg)} 100%{transform:rotateX(5deg)rotateY(0deg)}
}
@-moz-keyframes donghua{
0%{transform:rotateY(10deg)rotateY(0deg)}
50%{transform:rotateY(-10deg)rotateY(180deg)} 100%{transform:rotateY(10deg)rotateY(360deg)}
}
@-ms-keyframes donghua{
0%{transform:rotateY(10deg)rotateY(0deg)}
50%{transform:rotateY(-10deg)rotateY(180deg)}
（不看源代码，猜猜有多少张照⽚？）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。