原理:非常简单 一个div里面有六张图片 然后通过定位设置把两张图片重叠在一起 然后设置旋转点,以及旋转效果即可
源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.pkBox{
width: 155px;
height: 219px;
position: relative;
margin:300px auto;
}
.pkBox > img{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/*添加过渡*/
transition: transform 2s;
/*设置旋转轴心*/
transform-origin: right top;
}
/*添加鼠标上移的效果*/
.pkBox:hover >img:nth-of-type(1){
transform: rotate(60deg);
}
.pkBox:hover >img:nth-of-type(2){
transform: rotate(120deg);
}
.pkBox:hover >img:nth-of-type(3){
transform: rotate(180deg);
}
.pkBox:hover >img:nth-of-type(4){
transform: rotate(240deg);
}
.pkBox:hover >img:nth-of-type(5){
transform: rotate(300deg);
}
.pkBox:hover >img:nth-of-type(6){
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="pkBox">
<img src="../images/pk1.png" alt="">
<img src="../images/pk2.png" alt="">
<img src="../images/pk1.png" alt="">
<img src="../images/pk2.png" alt="">
<img src="../images/pk1.png" alt="">
<img src="../images/pk2.png" alt="">
</div>
</body>
</html>