3d相册html代码_纯css3d旋转相册我们先来看下效果和代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
li{list-style:none;}
html,body{height:100%;}
.box{
height:100%;
width:100%;
background: url(img/bj1.jpg) no-repeat;
background-size:  cover;
perspective: 1200px;
}
.box ul{
width:200px;
height:300px;
position: absolute;
top:50%;left:50%;
margin:-150px 0 0 -100px;
transform-style: preserve-3d;
animation: play  20s linear infinite;
}
.box ul li{
width:200px;
height:300px;
position: absolute;
html代码转链接top:0;left:0;
}
.box ul li img{
width:200px;
height:300px;
}
.box ul li:nth-child(1){
transform: rotateY(36deg) translateZ(500px);
}
.box ul li:nth-child(2){
transform: rotateY(72deg) translateZ(500px);
}
.box ul li:nth-child(3){
transform: rotateY(108deg) translateZ(500px);
}
.box ul li:nth-child(4){
.box ul li:nth-child(4){
transform: rotateY(144deg) translateZ(500px);
}
.
box ul li:nth-child(5){
transform: rotateY(180deg) translateZ(500px);
}
.box ul li:nth-child(6){
transform: rotateY(216deg) translateZ(500px);
}
.box ul li:nth-child(7){
transform: rotateY(252deg) translateZ(500px);
}
.box ul li:nth-child(8){
transform: rotateY(288deg) translateZ(500px);
}
.box ul li:nth-child(9){
transform: rotateY(324deg) translateZ(500px);
}
.box ul li:nth-child(10){
transform: rotateY(360deg) translateZ(500px);
}
@keyframes play{
0%{ transform: rotateX(0) rotateY(0deg) scale(1)}
50%{ transform: rotateX(5deg) rotateY(180deg) scale(0.7)}
100%{ transform: rotateX(0) rotateY(360deg)  scale(1)}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="img/767c14d61de6d5e4b990fc572a6568e1_1.jpg" ></li>
<li><img src="img/7a5807db25083336f4f743ae2f3f3a5d_1.jpg" ></li>
<li><img src="img/timg%5B1%5D.jpg" ></li>
<li><img src="img/u=1494278401,3707696933&fm=26&gp=0%5B1%5D.jpg" ></li>    <li><img src="img/u=1502903317,987147048&fm=26&gp=0%5B1%5D.jpg" ></li>    <li><img src="img/u=1723581145,678087488&fm=26&gp=0%5B1%5D.jpg" ></li>    <li><img src="img/u=2471723103,4261647594&fm=26&gp=0%5B1%5D.jpg" ></li>    <li><img src="img/u=27
39698855,2466469814&fm=26&gp=0%5B1%5D.jpg" ></li>    <li><img src="img/u=361494981,3349639195&fm=26&gp=0%5B1%5D.jpg" ></li>    <li><img src="img/u=895819719,4227412122&fm=26&gp=0%5B1%5D.jpg" ></li>  </ul>
</div>
</body>
</html>
如果需要可把下⽅图⽚换成⾃⼰喜欢的，制作成⾃⼰的相册。

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