<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>扑克牌旋转</title>
<style>
*{
padding: 0;
margin: 0;
}
.pk{
width: 152px;
margin: 300px auto;
position: relative;
transform: rotate(-20deg);
}
.pk>img{
width: 100px;
height: 300px;
position: absolute;
transition: transform 1s;
transform-origin: center bottom;
//旋转原点
}
.pk:hover > img:nth-of-type(1){
transform: rotate(20deg);
}
.pk:hover > img:nth-of-type(2){
transform: rotate(30deg);
}
.pk:hover > img:nth-of-type(3){
transform: rotate(40deg);
}
.pk:hover > img:nth-of-type(4){
transform: rotate(50deg);
}
.pk:hover > img:nth-of-type(5){
transform: rotate(60deg);
}
.pk:hover > img:nth-of-type(6){
transform: rotate(70deg);
}
</style>
</head>
<body>
<div class="pk">
<img src="img/q.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/w.jpg" alt="">
<img src="img/e.jpg" alt="">
<img src="img/r.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
</div>
</body>
</html>
