پیشنمایش زنده
کد HTML
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
کد CSS
.container {
width: 100%;
height: 100%;
}
.container div {
position: absolute;
height: 196px;
width: 132px;
background-color: #ebebeb;
border: 5px solid #ffffff;
border-bottom: 40px solid #ffffff;
left: 50%;
top: 50%;
translate: -50% -50%;
border-radius: 8%;
box-shadow: #c7c7c7 -2px 2px 4px;
transform-origin: bottom left;
scale: 1;
transition-duration: 200ms;
}
.container div:hover {
scale: 1.1;
}
.container div:nth-child(n) {
transform: rotate(0deg) translate(0px, -8px);
}
.container:hover div:nth-child(1) {
transform: rotate(-54deg) translate(0px, -8px);
}
.container:hover div:nth-child(2) {
transform: rotate(-36deg) translate(0px, -8px);
}
.container:hover div:nth-child(3) {
transform: rotate(-18deg) translate(0px, -8px);
}
.container:hover div:nth-child(4) {
transform: rotate(0deg) translate(0px, -8px);
}
.container:hover div:nth-child(5) {
transform: rotate(18deg) translate(0px, -8px);
}
.container:hover div:nth-child(6) {
transform: rotate(36deg) translate(0px, -8px);
}
.container:hover div:nth-child(7) {
transform: rotate(54deg) translate(0px, -8px);
}