使用html制作3D循环相册
Posted 江湖@小小白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用html制作3D循环相册相关的知识，希望对你有一定的参考价值。
使用 html 制作简单3D循环相册
注： img 标签中的 src 属性为你图片资源路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Love</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{width: 600px;height: 400px;margin: 200px auto;}
.box{width: 200px;height: 200px;margin: 100px auto;position: relative;transition: all 3s;transform-style: preserve-3d;animation: move 3s infinite linear alternate;}
.box>div{width: 200px;height: 200px;font-size: 60px;opacity: .5;position: absolute;top: 0;left: 0;transition: all 1s;}
.box img{width: 200px;height: 200px;}
.left{transform: rotateY(90deg) translateZ(-100px);}
.right{transform: rotateY(90deg) translateZ(100px);}
.top{transform: rotateX(90deg) translateZ(100px);}
.bottom{transform: rotateX(90deg) translateZ(-100px);}
.after{transform: translateZ(-100px);}
.before{transform: translateZ(100px);}
.wrap .box:hover .left{transform: rotateY(90deg) translateZ(-160px);}
.wrap .box:hover .right{transform: rotateY(90deg) translateZ(160px);}
.wrap .box:hover .top{transform: rotateX(90deg) translateZ(160px);}
.wrap .box:hover .bottom{transform: rotateX(90deg) translateZ(-160px);}
.wrap .box:hover .after{transform: translateZ(-160px);}
.wrap .box:hover .before{transform: translateZ(160px);}
@keyframes move{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(13deg) rotateY(280deg);}
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="left"><img src="img/1.jpg" alt=""></div>
<div class="right"><img src="img/2.jpg" alt=""></div>
<div class="top"><img src="img/3.jpg" alt=""></div>
<div class="bottom"><img src="img/4.jpg" alt=""></div>
<div class="after"><img src="img/5.jpg" alt=""></div>
<div class="before"><img src="img/6.jpg" alt=""></div>
</div>
</div>
</body>
</html>
alt="">
以上是关于使用html制作3D循环相册的主要内容，如果未能解决你的问题，请参考以下文章