图片3D多层

最新推荐文章于 2024-08-07 17:25:50 发布

镇长1998

最新推荐文章于 2024-08-07 17:25:50 发布

阅读量750

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_41514525/article/details/90349778

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多层</title>
		
		<style type="text/css">
			
			*{
				margin: 0px;
				padding: 0px;
			}
			
			.box{
				width: 300px;
				height: 500px;
				position: absolute;
				top: 35%;
				left: 40%;
				transform: rotate(-30deg) skew(25deg) scale(1);
				/* skew 属性的作用   同样的属性写在一块不然就覆盖了，如不要写三次transform 这样前面的就被覆盖了！！！*/
			}
			    
			.box img{
				position: absolute;   /*这样img就都相对于box定位了,保证了多个元素相互覆盖*/  
				width: 100%;
				height: 100%;
		
			}
			
			.box:hover img:nth-child(5){
				transform: translate(400px,-200px);
				transition: 0.5s;
				opacity: 1;
			}
			
			.box:hover img:nth-child(4){
				transform: translate(350px,-160px);
				transition: 0.5s;
				opacity: 0.8;
			}
			
			.box:hover img:nth-child(3){
				transform: translate(300px,-120px);
				transition: 0.5s;
				opacity: 0.5;
			}
			
			.box:hover img:nth-child(2){
				transform: translate(250px,-80px);
				transition: 0.5s;
				opacity: 0.4;
			}
			
			.box:hover img:nth-child(1){
				transform: translate(200px,-40px);
				transition: 0.5s;
				opacity: 0.2;
			}
			
			
			
		</style>
		
	</head>
	
	<body>
		
		<div class="box">
			<img src="more-h.png"/>
			<img src="more-h.png"/>
			<img src="more-h.png"/>
			<img src="more-h.png"/>
			<img src="more-h.png"/>
		</div>
		
		
		
	</body>
</html>