<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D翻转相册</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font: 14px "microsoft yahei";color: #333333;}
.box{width: 750px;margin: 30px auto;overflow: hidden;}
.box li{list-style: none;width: 240px ;height: 160px;margin: 5px;position: relative;color: #000000;transform-style: preserve-3d;float: left;transform: rotateX(0deg) rotateY(0deg);-webkit-transition: .5s all ease-out;}
.box li span em{font-style: normal;font-weight: bold;display: block;}
.box li img{width: 100%;height: 100%;position: absolute;transform: translateZ(120px);}
.box li span{display: block;width: 200px;height: 120px;position: absolute;background: #CCCCCC;transform: rotateY(90deg) translateZ(120px);padding: 0 20px;padding-top: 40px;}
.box li:hover{transform: rotateX(0deg) rotateY(-90deg);}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="img/1.jpg"/><span><em>欧文:</em>真理唯一可靠的标准就是永远自相符合</span></li>
<li><img src="img/2.jpg"/><span><em>欧文:</em>真理唯一可靠的标准就是永远自相符合</span></li>
<li><img src="img/3.jpg"/><span><em>欧文:</em>真理唯一可靠的标准就是永远自相符合</span></li>
<li><img src="img/4.jpg"/><span><em>欧文:</em>真理唯一可靠的标准就是永远自相符合</span></li>
<li><img src="img/5.jpg"/><span><em>欧文:</em>真理唯一可靠的标准就是永远自相符合</span></li>
<li><img src="img/6.jpg"/><span><em>欧文:</em>真理唯一可靠的标准就是永远自相符合</span></li>
<li><img src="img/7.jpg"/><span><em>欧文:</em>真理唯一可靠的标准就是永远自相符合</span></li>
<li><img src="img/8.jpg"/><span><em>欧文:</em>真理唯一可靠的标准就是永远自相符合</span></li>
<li><img src="img/9.jpg"/><span><em>欧文:</em>真理唯一可靠的标准就是永远自相符合</span></li>
</ul>
</div>
</body>
</html>
3D翻转相册
最新推荐文章于 2022-12-03 15:43:31 发布