css照片墙

最新推荐文章于 2023-09-11 16:41:04 发布

丿秃了少年头

最新推荐文章于 2023-09-11 16:41:04 发布

阅读量296

点赞数 2

分类专栏： css 文章标签： css3 html

本文链接：https://blog.csdn.net/weixin_54527525/article/details/114525553

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用css3实现照片墙效果

主要利用 calc 函数实现照片不同角度的反转，利用hover和active实现一个有趣的用户交互效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.box{
				width: 960px;
				margin: 200px;
				position: relative;
				perspective: 800px;
				transform-style: preserve-3d;
			}
			.box img{
				border: 1px solid #ddd;
				padding: 10px;
				position: absolute;
				background: #FFF;
				box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
				transition: all 0.8s linear;
			}
			/* 获取box里每一个img标签 */
			.box img:nth-child(1){
				top: 0px;
				left: 300px;
				transform: rotate(-15deg);
				width: 200px;
				z-index: 3;
			}
			.box img:nth-child(2){
				top: 120px;
				left: 600px;
				transform: rotate(20deg);
				width: 140px;
				z-index: 4;
			}
			.box img:nth-child(3){
				top: 160px;
				left: 200px;
				transform: rotate(20deg);
				width: 220px;
				z-index: 2;
			}
			.box img:nth-child(4){
				top: -50px;
				left: 600px;
				transform: rotate(-20deg);
				width: 150px;
				z-index: 5;
			}
			.box img:hover{
				z-index: 999;
				box-shadow: 5px 5px 5px #ccc;
				transform: rotate(0deg) scale(1.5);
			}
			.box img:active{
				z-index: 999;
				box-shadow: 5px 5px 5px #ccc;
				transform: rotateY(calc(var(--i) * 10deg)) rotateX(calc(var(--i) * 10deg)) scale(1.5);
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="img/01fde5e29c566dffbb0035d6a83f364c.jpg" alt="" style="--i:-4;"/>
			<img src="img/2f54193a81149b927000a0101149a501.jpeg" alt="" style="--i:-3;"/>
			<img src="img/80c66941dffd12db49b5d99a0a833b77.jpeg" alt="" style="--i:2;"/>
			<img src="img/9f2b40b256bb4076073beba140db1c20.jpeg" alt="" style="--i:5;"/>
		</div>
	</body>
</html>