3D翻转相册

最新推荐文章于 2022-12-03 15:43:31 发布

置顶 @CJL

最新推荐文章于 2022-12-03 15:43:31 发布

阅读量217

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_44109821/article/details/103678040

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述

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

@CJL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D翻转相册

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>3D翻转相册</title> <style type="text/css"> *{margin: 0;padding: 0;} body{font: 14px "micr...
复制链接

扫一扫