<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
.box{
width: 800px;height: 500px;
margin: 30px auto;
border-bottom: 2px red solid;
position: relative;
}
.box p{
width: 60px;height: 200px;
top: 100px;left: 370px;
position: absolute;
text-align: center;
box-shadow: 3px 3px 5px #333;
transform-origin: center bottom;
transition: all 1s linear;
}
.box p:nth-of-type(1){background: red;}
.box p:nth-of-type(2){background: yellow;opacity: 0;}
.box p:nth-of-type(3){background: black;opacity: 0;}
.box p:nth-of-type(4){background: pink;opacity: 0;}
.box p:nth-of-type(5){background: green;opacity: 0;}
.box p:nth-of-type(6){background: blue;opacity: 0;}
.box p:nth-of-type(7){background: blueviolet;opacity: 0;}
.box p:nth-of-type(8){background: peru;opacity: 0;}
.box p:nth-of-type(9){background: yellowgreen;opacity: 0;}
.box p:nth-of-type(10){background: purple;opacity: 0;}
.box p:nth-of-type(11){background: hotpink;opacity: 0;}
.box p:nth-of-type(12){background: aqua;opacity: 0;}
.box p:nth-of-type(13){background: gold;opacity: 0;}
.box:hover p:nth-of-type(1){transform: rotate(-90deg);}
.box:hover p:nth-of-type(2){transform: rotate(-75deg);opacity: 1;}
.box:hover p:nth-of-type(3){transform: rotate(-60deg);opacity: 1;}
.box:hover p:nth-of-type(4){transform: rotate(-45deg);opacity: 1;}
.box:hover p:nth-of-type(5){transform: rotate(-30deg);opacity: 1;}
.box:hover p:nth-of-type(6){transform: rotate(-15deg);opacity: 1;}
.box:hover p:nth-of-type(7){transform: rotate(0deg);opacity: 1;}
.box:hover p:nth-of-type(8){transform: rotate(15deg);opacity: 1;}
.box:hover p:nth-of-type(9){transform: rotate(30deg);opacity: 1;}
.box:hover p:nth-of-type(10){transform: rotate(45deg);opacity: 1;}
.box:hover p:nth-of-type(11){transform: rotate(60deg);opacity: 1;}
.box:hover p:nth-of-type(12){transform: rotate(75deg);opacity: 1;}
.box:hover p:nth-of-type(13){transform: rotate(90deg);opacity: 1;}