基于css3的一个照片墙，可实现图片放大，旋转

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>

	h1{
		text-align: center;
	}
	body{
		background: #eeedef;
	}
	img{
		padding:10px 10px  15px 10px ;
		background: #fff;
		border:1px solid #ddd;
		position:absolute;
		transition:1000ms;

	}
	.pic1{
		transform:rotate(20deg);
		-webkit-transform:rotate(20deg);
		-moz-transform:rotate(20deg);
		 top:50px;
        left:200px;
	}
	.pic2{
		transform:rotate(40deg);
		-webkit-transform:rotate(40deg);
		-moz-transform:rotate(40deg);
		 top:150px;
        left:100px;
	}
	.pic3{
		transform:rotate(30deg);
		-webkit-transform:rotate(30deg);
		-moz-transform:rotate(30deg);
		 top:50px;
        left:130px;
	}
	.pic4{
		transform:rotate(-20deg);
		-webkit-transform:rotate(-20deg);
		-moz-transform:rotate(-20deg);
		 top:70px;
        left:300px;
	}
	.pic5{
		transform:rotate(70deg);
		-webkit-transform:rotate(70deg);
		-moz-transform:rotate(70deg);
		 top:210px;
        left:400px;
        z-index: 45;
	}
	.pic6{
		transform:rotate(10deg);
		-webkit-transform:rotate(10deg);
		-moz-transform:rotate(10deg);
		 top:170px;
        left:580px;
        z-index: 50;
	}
	.pic7{
		transform:rotate(-60deg);
		-webkit-transform:rotate(-60deg);
		-moz-transform:rotate(20deg);
		 top:590px;
        left:400px;
        z-index: 240;
	}
	.pic8{
		transform:rotate(20deg);
		-webkit-transform:rotate(20deg);
		-moz-transform:rotate(20deg);
		 top:50px;
        left:400px;
        z-index: 120;
	}
	.pic9{
		transform:rotate(70deg);
		-webkit-transform:rotate(70deg);
		-moz-transform:rotate(70deg);
		 top:420px;
        left:500px;
	}
	.pic10{
		transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		 top:120px;
        left:600px;
        z-index:300;
	}
	img:hover{
		transform:rotate(0deg);
		transform:scale(2);
		box-shadow: 10px 10px 15px #ccc;
        z-index: 900;
	}
	#container{
		width:80%;
		height:600px;
		margin:50px auto;
        position:relative;
       
       
		}
		
		</style>
</head>
<body>
	<h1>照片墙</h1>
	<div id="container">
	  <img src="images/mm1.jpg" alt="" class="pic1" />
	  <img src="images/mm2.jpg" alt="" class="pic2" />
	  <img src="images/mm3.jpg" alt="" class="pic3" />
	  <img src="images/mm4.jpg" alt="" class="pic4" />
	  <img src="images/mm5.jpg" alt="" class="pic5" />
	  <img src="images/mm6.jpg" alt="" class="pic6" />
	  <img src="images/mm7.jpg" alt="" class="pic7" />
	  <img src="images/mm8.jpg" alt="" class="pic8" />
	  <img src="images/mm9.jpg" alt="" class="pic9" />
	  <img src="images/mm10.jpg" alt="" class="pic10" />

	</div>
</body>
</html>

图片自己换上自己的，大小要控制好

下面是效果：

鼠标移上图片会旋转回正并放大。移开则会返回。

————学习自慕课网，作为纪念。

基于css3的一个照片墙，可实现图片放大，旋转

猜你喜欢