3D翻转相册

最新推荐文章于 2021-02-27 12:13:21 发布

置顶 @CJL

最新推荐文章于 2021-02-27 12:13:21 发布

阅读量244

点赞数

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/qq_44109821/article/details/103678040

版权

笔记专栏收录该内容

10 篇文章

订阅专栏

在这里插入图片描述

<!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>