پیش‌نمایش زنده
کد 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);
}
نوع: card
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06