1.旋转属性：transform
旋转函数 ：rotate(value deg)
value>0：顺时针旋转
value<0：逆时针旋转
倾斜函数 ：skew(value deg)
skewX() skewY()
缩放函数：scale(scaleX,scaleY)
scaleX(value)：水平缩放
value>1：水平放大到原来的value倍
0<value<1：水平缩小到原来的value倍
value<0：水平翻转之后在放大或缩小到原来的value倍
scaleY(value)：垂直缩放
value>1：垂直放大到原来的value倍
0<value<1：垂直缩小到原来的value倍
value<0：垂直翻转之后在放大或缩小到原来的value倍
位移函数：translate(translateX,translateY)
translateX(value px)：水平位移，水平向右为正，向左为负
translateY(value px)：垂直位移，垂直向下为正，向上为负
2.旋转基点：transform-origin
| 左上角 | transform-origin:0 0 |
| 右上角 | transform-origin:100% 0 |
| 左下角 | transform-origin:0 100% |
| 右下角 | transform-origin:100% 100% |
| 中心点 | transform-origin:50% 50% |
3.过渡属性：transition
| 要运动的样式 | transition-property |
| 运动时间 | transition-duration |
| 延迟时间 | transition-delay |
| 运动形式 | transition-timing-function |
运动形式：
| ease-out | 减速 |
| ease-in-out | 先加速后减速 |
| ease | （逐渐变慢）默认值 |
| ease-in | 加速 |
| linear | 匀速 |
4.例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业1</title>
<style type="text/css">
*{margin:0;padding:0;}
body,html{background:#000;}
div{width:200px;height:150px;position:relative;float:left}
div img{width:200px;height:150px;box-shadow:0 0 2px 2px #fff;position:absolute;}
.imgs1{left:50px;top:50px}
.imgs1 img{transition:all 0.5s;}
.imgs2{left:200px;top:80px}
.imgs2 img{transition:all 0.5s;transform-origin:0 100%;}
.imgs3{left:300px;top:80px}
.imgs3 img{transition:all 0.5s;}
.imgs3 .img1{transform-origin:100% 0;}
.imgs3 .img2{transform-origin:100% 100%;}
.imgs3:hover .img11{transform:rotate(-40deg)}
.imgs3:hover .img12{transform:rotate(-30deg)}
.imgs3:hover .img13{transform:rotate(-20deg)}
.imgs3:hover .img21{transform:rotate(40deg)}
.imgs3:hover .img22{transform:rotate(30deg)}
.imgs3:hover .img23{transform:rotate(20deg)}
.imgs3:hover .img24{transform:rotate(10deg)}
.imgs4{right:500px;top:400px;}
.imgs4 img{transition:all 0.5s;transform-origin:0 100%;}
.imgs4:hover .img1{transform:rotate(-42deg) translate(30px,-180px) scale(0.5,0.5)}
.imgs4:hover .img2{transform:rotate(-35deg) translate(25px,-150px) scale(0.6,0.6)}
.imgs4:hover .img3{transform:rotate(-28deg) translate(20px,-120px) scale(0.7,0.7)}
.imgs4:hover .img4{transform:rotate(-21deg) translate(15px,-90px) scale(0.8,0.8)}
.imgs4:hover .img5{transform:rotate(-14deg) translate(10px,-60px) scale(0.9,0.9)}
.imgs4:hover .img6{transform:rotate(-7deg) translate(5px,-30px) scale(1,1)}
.imgs4:hover .img7{transform:rotate(0deg) translate(0,0) scale(1,1)}
.imgs5{right:100px;top:400px}
.imgs5 img{transition:all 0.5s;transform-origin:0 100%;}
.imgs5:hover .img1{transform:rotate(-20deg) translate(-20px,80px);}
.imgs5:hover .img2{transform:rotate(-20deg) translate(80px,50px);}
.imgs5:hover .img3{transform:rotate(-20deg) translate(20px,-70px);}
.imgs5:hover .img4{transform:rotate(-20deg) translate(-80px,-40px);}
.imgs5:hover .img5{transform:rotate(-20deg) translate(0px,0px);}
.imgs6{left:400px;top:600px}
.imgs6 img{transition:all 0.5s;/*transform-origin:0 100%;*/}
.imgs6:hover .img1{transform:rotate(-20deg) translate(-150px,-115px) scale(0.7,0.7);}
.imgs6:hover .img2{transform:rotate(-20deg) translate(0px,-115px) scale(0.7,0.7);}
.imgs6:hover .img3{transform:rotate(-20deg) translate(150px,-115px) scale(0.7,0.7);}
.imgs6:hover .img4{transform:rotate(-20deg) translate(-150px,0px) scale(0.7,0.7);}
.imgs6:hover .img5{transform:rotate(-20deg) translate(150px,0px) scale(0.7,0.7)}
.imgs6:hover .img6{transform:rotate(-20deg) translate(-150px,115px) scale(0.7,0.7)}
.imgs6:hover .img7{transform:rotate(-20deg) translate(0px,115px) scale(0.7,0.7)}
.imgs6:hover .img8{transform:rotate(-20deg) translate(150px,115px) scale(0.7,0.7);}
.imgs6:hover .img9{transform:rotate(-20deg) translate(0px,0px) scale(1.2,1.2)}
.imgs7{left:0px;top:900px}
.imgs7 img{transition:all 0.5s;/*transform-origin:0 100%;*/}
.imgs7:hover .img1{transform:translateY(-80px) scale(0.7,0.7);}
.imgs7:hover .img2{transform:translateY(-60px) scale(0.8,0.8);}
.imgs7:hover .img3{transform:translateY(-40px) scale(0.9,0.9);}
.imgs7:hover .img4{transform:translateY(-20px) scale(1,1);}
.imgs7:hover .img5{transform:translateY(0px) scale(1.1,1.1)}
.imgs8{left:200px;top:900px}
.imgs8 img{transition:all 0.5s;}
.imgs8 .img1{transform-origin:0 0;}
.imgs8 .img2{transform-origin:100% 0;}
.imgs8 .img3{transform-origin:0 0;}
.imgs8 .img4{transform-origin:100% 0;}
.imgs8 .img5{transform-origin:0 0;}
.imgs8 .img6{transform-origin:100% 0;}
.imgs8 .img7{transform-origin:0 0;}
.imgs8 .img8{transform-origin:100% 0;}
.imgs8:hover .img1{transform:translate(190px,-80px) rotate(-65deg) scale(0.6,0.6);}
.imgs8:hover .img2{transform:translate(-190px,-80px) rotate(65deg) scale(0.6,0.6);}
.imgs8:hover .img3{transform:translate(170px,-50px) rotate(-50deg) scale(0.7,0.7);}
.imgs8:hover .img4{transform:translate(-170px,-50px) rotate(50deg) scale(0.7,0.7);}
.imgs8:hover .img5{transform:translate(150px,-20px) rotate(-35deg) scale(0.8,0.8)}
.imgs8:hover .img6{transform:translate(-150px,-20px) rotate(35deg) scale(0.8,0.8)}
.imgs8:hover .img7{transform:translate(130px,10px) rotate(-20deg) scale(0.9,0.9)}
.imgs8:hover .img8{transform:translate(-130px,10px) rotate(20deg) scale(0.9,0.9)}
.imgs8:hover .img9{transform:rotate(0deg) translate(0px,10px) scale(1,1)}
</style>
</head>
<body>
<div class="imgs1">
<img src="img/studio_0002.jpg"/>
<img src="img/studio_0003.jpg"/>
<img src="img/studio_0004.jpg"/>
<img src="img/studio_0005.jpg"/>
<img src="img/studio_0006.jpg"/>
<img src="img/studio_0007.jpg"/>
<img src="img/studio_0008.jpg"/>
<img src="img/studio_0009.jpg"/>
<img src="img/studio_0001.jpg"/>
</div>
<div class="imgs2">
<img src="img/studio_0001.jpg"/>
<img src="img/studio_0003.jpg"/>
<img src="img/studio_0004.jpg"/>
<img src="img/studio_0005.jpg"/>
<img src="img/studio_0006.jpg"/>
<img src="img/studio_0007.jpg"/>
<img src="img/studio_0008.jpg"/>
<img src="img/studio_0009.jpg"/>
<img src="img/studio_0002.jpg"/>
</div>
<div class="imgs3">
<img class="img1 img11" src="img/studio_0001.jpg"/>
<img class="img1 img12" src="img/studio_0002.jpg"/>
<img class="img1 img13" src="img/studio_0004.jpg"/>
<img class="img2 img21" src="img/studio_0005.jpg"/>
<img class="img2 img22" src="img/studio_0006.jpg"/>
<img class="img2 img23" src="img/studio_0007.jpg"/>
<img class="img2 img24" src="img/studio_0008.jpg"/>
<img src="img/studio_0003.jpg"/>
</div>
<div class="imgs4">
<img class="img1" src="img/studio_0003.jpg"/>
<img class="img2" src="img/studio_0005.jpg"/>
<img class="img3" src="img/studio_0006.jpg"/>
<img class="img4" src="img/studio_0007.jpg"/>
<img class="img5" src="img/studio_0008.jpg"/>
<img class="img6" src="img/studio_0009.jpg"/>
<img class="img7" src="img/studio_0004.jpg"/>
</div>
<div class="imgs5">
<img class="img1" src="img/studio_0002.jpg"/>
<img class="img2" src="img/studio_0003.jpg"/>
<img class="img3" src="img/studio_0004.jpg"/>
<img class="img4" src="img/studio_0005.jpg"/>
<img class="img5" src="img/studio_0006.jpg"/>
</div>
<div class="imgs6">
<img class="img1" src="img/studio_0002.jpg"/>
<img class="img2" src="img/studio_0003.jpg"/>
<img class="img3" src="img/studio_0004.jpg"/>
<img class="img4" src="img/studio_0005.jpg"/>
<img class="img5" src="img/studio_0006.jpg"/>
<img class="img6" src="img/studio_0007.jpg"/>
<img class="img7" src="img/studio_0008.jpg"/>
<img class="img8" src="img/studio_0009.jpg"/>
<img class="img9" src="img/studio_0010.jpg"/>
</div>
<div class="imgs7">
<img class="img1" src="img/studio_0002.jpg"/>
<img class="img2" src="img/studio_0003.jpg"/>
<img class="img3" src="img/studio_0004.jpg"/>
<img class="img4" src="img/studio_0005.jpg"/>
<img class="img5" src="img/studio_0006.jpg"/>
</div>
<div class="imgs8">
<img class="img1" src="img/studio_0002.jpg"/>
<img class="img2" src="img/studio_0003.jpg"/>
<img class="img3" src="img/studio_0004.jpg"/>
<img class="img4" src="img/studio_0005.jpg"/>
<img class="img5" src="img/studio_0006.jpg"/>
<img class="img6" src="img/studio_0007.jpg"/>
<img class="img7" src="img/studio_0008.jpg"/>
<img class="img8" src="img/studio_0009.jpg"/>
<img class="img9" src="img/studio_0011.jpg"/>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.imgs1').hover(function(){
$('.imgs1 img').eq(0).css('transform','rotate(-28deg)')
$('.imgs1 img').eq(1).css('transform','rotate(28deg)')
$('.imgs1 img').eq(2).css('transform','rotate(-21deg)')
$('.imgs1 img').eq(3).css('transform','rotate(21deg)')
$('.imgs1 img').eq(4).css('transform','rotate(-14deg)')
$('.imgs1 img').eq(5).css('transform','rotate(14deg)')
$('.imgs1 img').eq(6).css('transform','rotate(-7deg)')
$('.imgs1 img').eq(7).css('transform','rotate(7deg)')
},function(){
$(this).children().css('transform','rotate(0deg)')
})
$('.imgs2').hover(function(){
$(this).children().each(function(){
var len=$('.imgs2 img').length
var ind=$(this).index()
$('.imgs2 img').eq(ind).css('transform','rotate('+ -5*(len-ind)+'deg) translate('+(len-ind-1)*(-4)+'px,'+(len-ind-1)*(-4)+'px)')
})
},function(){
$(this).children().css('transform','rotate(0deg) translate(0,0)')
})
</script>
</body>
</html>
