简单阐述一下：当鼠标移到图片上时，首尾两张图片实现分别向两边旋转功能。（图片大家可以自己选择）
起初页面效果如下：
当鼠标移动到图片上时效果如下：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片旋转</title>
<style type="text/css">
.wrap{
width: 300px;
height: 200px;
margin: 2rem auto;
}
.wrap > img{
position: absolute;
border: 10px solid magenta;
box-sizing: border-box;
box-shadow: 4px 4px 3px rgba(0,0,0,0.2);
-webkit-transform-origin: center 400px;
transform-origin:center 400px;
-webkit-transition: transform .7s ease;
transition: transform .7s ease;/*移动时间为0.7s，速度为慢->快->慢*/
}
.wrap img:first-child{ /*first-child为第一张图片的意思*/
transform: rotate(5deg);
/*-moz代表firefox浏览器私有属性-ms代表ie浏览器私有属性-webkit代表safari、chrome私有属性*/
-webkit-transform: rotate(5deg);
}
.wrap img:last-child{/*last-child为第二张图片*/
transform: rotate(-5deg);/*旋转角度*/
-webkit-transform: rotate(-5deg);/*safari、chrome浏览器的私有属性*/
}
.wrap:hover img:first-child{
transform: rotate(25deg);
-webkit-transform: rotate(25deg);
}
.wrap:hover img:last-child{
transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
}
</style>
</head>
<body>
<div class="wrap">
<img src="../img/cy.png" alt="" width="300" height="200">
<img src="../img/cy.png" alt="" width="300" height="200">
<img src="../img/cy.png" alt="" width="300" height="200">
</div>
</body>
</html>