前端

最新推荐文章于 2024-10-15 14:59:12 发布

嫣然@一笑

最新推荐文章于 2024-10-15 14:59:12 发布

阅读量82

点赞数

分类专栏： 3D图片文章标签： html css html5

本文链接：https://blog.csdn.net/sonia_jade/article/details/107399910

版权

3D图片专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端——3D图片

运用CSS和html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>lwl</title>
	<style>
		body {
			margin: 0;
		}
		.img-list {
			width: 650px;
			height: 570px;
			margin: 100px auto;
		}
		.img-list ul{
			display: flex;
			justify-content: space-between;
			list-style-type: none;
			width: 100%;
			height: 100%;
			padding: 0;
			
		}
		.img-list ul li {
			position: relative;
			width: 300px;
			height: 300px;
			perspective: 1000px;
		}
		.img-list ul li p {
			position: absolute;
			left: 0;
			top: 0;
			width: 300px;
			height: 210px;
			padding-top: 90px;
			background-color: rgba(0, 0, 0, 0.6);
			color: #fff;
			text-align: center;
			transform: rotateY(90deg);
			transition: 1s;
		}
		.img-list ul li:hover p {
			transform: rotateY(0deg);
		}
		.img-list ul li:hover img {
			transform: rotateY(-90deg);
		}
		img{
			transition: 1s;
		}
	</style>
</head>
<body>
	<div class="img-list">
		<ul>
			<li><img src="../image/119.jpg" width="300px"
			 height="300px">
				<p>我盼望行过万里山河也盼望与你行至千里</p>
			</li>
			<li><img src="../image/120.jpg" width="300px" height="300px">
				<p>我见众生皆草木，唯你是青山</p>
			</li>
		</ul>
	</div>
</body>
</html>