1. The rotation properties: Transform
Rotation function: rotate (value deg)
value> 0: clockwise rotation
value <0: anticlockwise
Tilt function: skew (value deg)
skewX () skewY ()
Zoom function: scale (scaleX, scaleY)
scaleX (value): horizontal zoom
value> 1: horizontal enlargement to the original value times
0 <value <1: horizontal fold reduced to the original value
value <0: in the enlarged or reduced to the original level after the flip-fold value
scaleY (value): vertical scale
value> 1: vertical enlargement to the original value times
0 <value <1: Vertical fold reduced to the original value
value <0: after enlarged or reduced in the vertical flip-fold the original value
Displacement Function: translate (translateX, translateY)
translateX (value px): horizontal displacement, horizontally to the right is positive, left is negative
translateY (value px): vertical displacement, vertical downward as positive, negative direction
2. Rotate point: transform-origin
| The upper left corner | transform-origin:0 0 |
| Upper right corner | transform-origin:100% 0 |
| Lower left corner | transform-origin:0 100% |
| Bottom right corner | transform-origin:100% 100% |
| Central point | transform-origin:50% 50% |
3. Transition Properties: Transition
| To sports style | transition-property |
| time for excercise | transition-duration |
| delay | transition-delay |
| Form of exercise | transition-timing-function |
Form of exercise:
| ease-out | slow down |
| ease-in-out | After the first acceleration and deceleration |
| ease | (Gradually slowing) defaults |
| ease-in | accelerate |
| linear | Uniform |
4. Examples
<!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>
