<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>照片墙案例</title>
<style type="">
*{
padding: 0;
margin: 20px;
}
.box{
height: 100%;
width: 800px;
}
.box img{
width: 250px;
height: 200px;
border: 8px solid whitesmoke;
margin-right: -120px;
margin-bottom: -90px;
transition: all 0.3s;
}
.box .img1{
transform: rotate(30deg);
}
.box .img2{
transform: rotate(-30deg);
}
.box img:hover{
transform:scale(2.2) ;
}
.box img::after{
content: " ";
display:block;
width: 160px;
height: 120px;
transform-origin:left bottom ;
transform: rotate(45deg);
transition: all 0.3s;
}
div:hover::after{
transform: rotate(-45deg);
}
<×yle>
</head>
<body>
<div class="box">
<img class="img1" src="imggz_01.jpg" alt="">
<img class="img2" src="imggz_02.jpg" alt="">
<img class="img1" src="imggz_03.jpg" alt="">
<img class="img2" src="imggz_04.jpg" alt="">
<img class="img1" src="imggz_05.jpg" alt="">
<img class="img2" src="imggz_06.jpg" alt="">
<img class="img1" src="imggz_07.jpg" alt="">
<img class="img2" src="imggz_08.jpg" alt="">
</div>
</body>
<cml>
