要点：
1.结构伪类选择器，注意nth-child后面接括号，里面写数字，从0开始。
特殊开头是first-child和last-child
2.过渡属性有四个值，后面的效果时间曲线和延时设为默认
3.旋转注意，正值为顺时针，负值为逆时针，单位是度（deg，千万不能与战队edg混，哈哈）
4.后加载的图层权重更大，在上面（所以我们看到的，是最后加载的）
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 170px;
height: 250px;
border: 1px solid red;
margin: 350px auto;
position: relative;
}
div img{
width: 100%;
height: 100%;
/*图片长宽比例不一致*/
position: absolute;
top: 0;
left: 0;
transition: all 1.4s;
/*为所有的动画对象执行，执行时间为1.6s*/
transform-origin: top right;
/*默认以图片的中心点为旋转点，改成右上角点*/
}
div:hover img:first-child{
transform: rotate(45deg);
/*一共8一幅图片共360deg，平均45deg*/
}
div:hover img:nth-child(2){
transform: rotate(90deg);
}
div:hover img:nth-child(3){
transform: rotate(135deg);
}
div:hover img:nth-child(4){
transform: rotate(180deg);
}
div:hover img:nth-child(5){
transform: rotate(225deg);
}
div:hover img:nth-child(6){
transform: rotate(270deg);
}
div:hover img:nth-child(7){
transform: rotate(315deg);
}
div:hover img:last-child{
transform: rotate(360deg);
/*第一幅位置没有变换，但是加上动画，就会旋转一圈，好看*/
}
</style>
</head>
<body>
<div>
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/11.jpg">
<img src="img/12.jpg">
<img src="img/13.jpg">
<img src="img/14.jpg">
<img src="img/16.jpg">
<img src="img/18.jpg">
</div>
</body>
</html>效果：（gif图，多加载一会）
