<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转9特效</title>
<style>
*{margin: 0;padding: 0;}
body{background: grey;}
div.d2{
width: 250px;
height: 165px;
margin: 200px auto;
position: relative;
}
div.d2 img{
width: 250px;
height: 165px;
position: absolute;
left: 0;top: 0;
border: 5px solid white;
transition: all 0.5s;
}
.d2:hover img:first-child{
transform: translate(-70%,0) rotate(-20deg);
}
.d2:hover img:nth-child(2){
transform: translate(0,70%) rotate(-20deg);
}
.d2:hover img:nth-child(3){
transform: translate(70%,0) rotate(-20deg);
}
.d2:hover img:nth-child(4){
transform: translate(0,-70%) rotate(-20deg);
}
.d2:hover img:nth-child(5){
transform: scale(1.2,1.2) rotate(-20deg);
}
</style>
</head>
<body>
<div class="d2">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
</div>
</body>
</html>