css3-添加多个transform属性
2019-08-27 本文已影响0人
AssertDo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #31965b;
}
.box{
width: 440px;
margin:100px auto;
}
.box > img{
transition: transform 1s;
}
.box > img:nth-of-type(1){
transform: translate(100px,100px) rotate(30deg);
}
.box > img:nth-of-type(2){
transform: translate(-100px,-100px) rotate(-30deg);
}
.box > img:nth-of-type(3){
transform: translate(200px,200px) rotate(60deg);
}
.box > img:nth-of-type(4){
transform: translate(-200px,-200px) rotate(-60deg);
}
.box > img:nth-of-type(5){
transform: translate(150px,150px) rotate(90deg);
}
.box > img:nth-of-type(6){
transform: translate(50px,150px) rotate(-90deg);
}
.box > img:nth-of-type(7){
transform: translate(-150px,-150px) rotate(60deg);
}
.box > img:nth-of-type(8){
transform: translate(10px,-250px) rotate(-90deg);
}
.box > img:nth-of-type(9){
transform: translate(-250px,10px) rotate(45deg);
}
.box:hover > img{
transform: none;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/shield_1_01.png" alt="">
<img src="../images/shield_1_02.png" alt="">
<img src="../images/shield_1_03.png" alt="">
<img src="../images/shield_1_04.png" alt="">
<img src="../images/shield_1_05.png" alt="">
<img src="../images/shield_1_06.png" alt="">
<img src="../images/shield_1_07.png" alt="">
<img src="../images/shield_1_08.png" alt="">
<img src="../images/shield_1_09.png" alt="">
</div>
</body>
</html>
