今天回翻了一下好久没用的transform,用其属性值rotate做一个小玩意 有兴趣的可以进来看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 270px;
border-bottom:2px solid black;
position:relative;
margin:60px auto;
}
.box div{
width: 60px;
height:230px;
transition:2s;
position:absolute;
transform-origin:center bottom;
top:0;
left:250px;
box-shadow:2px 2px 3px #ccc;
}
.box div:nth-child(1){
background-color:lightblue;
}
.box:hover div:nth-child(2){
background-color:lightyellow;
transform:rotate(15deg);
}
.box:hover div:nth-child(3){
background-color:rgb(95, 140, 148);
transform:rotate(30deg);
}
.box:hover div:nth-child(4){
background-color:lightpink;
transform:rotate(45deg);
}
.box:hover div:nth-child(5){
background-color:lightyellow ;
transform:rotate(60deg);
}
.box:hover div:nth-child(6){
background-color:rgb(233, 203, 147);
transform:rotate(75deg);
}
.box:hover div:nth-child(7){
background-color:lightgreen;
transform:rotate(90deg);
}
.box:hover div:nth-child(8){
background-color:rgb(241, 241, 55);
transform:rotate(-15deg);
}
.box:hover div:nth-child(9){
background-color:blue;
transform:rotate(-30deg);
}
.box:hover div:nth-child(10){
background-color:lightpink;
transform:rotate(-45deg);
}
.box:hover div:nth-child(11){
background-color:yellow ;
transform:rotate(-60deg);
}
.box:hover div:nth-child(12){
background-color:orange;
transform:rotate(-75deg);
}
.box:hover div:nth-child(13){
background-color:lightgreen;
transform:rotate(-90deg);
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>6</div>
<div>5</div>
<div>4</div>
<div>3</div>
<div>2</div>
<div>1</div>
</div>
</body>
</html>