Otáčecí carousel s 3D efektem v čistém CSS

Animovaný carousel pro několik itemů, která se otáčí dokolečka. Itemy vpředu jsou větší než ty vzadu, což vytváří 3D efekt. Animace pouze přes CSS bez JS.

Živá ukázka

HTML

<div class="rotation-container">
    <div class="item-container item-container-1">
        <a href="#" class="item item-1"></a>
    </div>
    <div class="item-container item-container-2">
        <a href="#" class="item item-2"></a>
    </div>
    <div class="item-container item-container-3">
        <a href="#" class="item item-3"></a>
    </div>
    <div class="item-container item-container-4">
        <a href="#" class="item item-4"></a>
    </div>
    <div class="item-container item-container-5">
        <a href="#" class="item item-5"></a>
    </div>
    <div class="item-container item-container-6">
        <a href="#" class="item item-6"></a>
    </div>
</div>

CSS

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes backwards-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes scaling {
  0% {
    transform: scale(0.65) translateY(65px);
  }
  15% {
    transform: scale(0.5) translateY(100px);
  }
  65% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0.65) translateY(65px);
  }
}
.rotation-container {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 100px;
  left: 200px;
  transform: rotate(90deg);
  animation: rotation 20s infinite linear;
}
.rotation-container:hover {
  animation-play-state: paused;
}
.rotation-container:hover .item-container {
  animation-play-state: paused;
}
.rotation-container:hover .item {
  animation-play-state: paused;
}
.rotation-container .item-container {
  position: absolute;
  animation: backwards-rotation 20s infinite linear;
}
.rotation-container .item-container-1 {
  bottom: -60px;
  left: -110px;
}
.rotation-container .item-container-2 {
  top: -60px;
  left: -110px;
}
.rotation-container .item-container-3 {
  left: 10px;
  bottom: 145px;
}
.rotation-container .item-container-4 {
  top: -60px;
  right: -110px;
}
.rotation-container .item-container-5 {
  bottom: -60px;
  right: -110px;
}
.rotation-container .item-container-6 {
  left: 10px;
  top: 145px;
}
.rotation-container .item {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 12px;
  background-color: #e91b23;
  animation: scaling 20s infinite linear;
}
.rotation-container .item-1 {
  animation-delay: -16.66667s;
}
.rotation-container .item-2 {
  animation-delay: -20s;
}
.rotation-container .item-3 {
  animation-delay: -23.33333s;
}
.rotation-container .item-4 {
  animation-delay: -26.66667s;
}
.rotation-container .item-5 {
  animation-delay: -30s;
}
.rotation-container .item-6 {
  animation-delay: -33.33333s;
}

SCSS (Sass)

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes backwards-rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@keyframes scaling {
    0% {
        transform: scale(.65) translateY(65px);
    }
        15% {
        transform: scale(.5) translateY(100px);
    }
        65% {
        transform: scale(1.2);
    }
        100% {
        transform: scale(.65) translateY(65px);
    }
}

  $red: #e91b23;
$animation-duration: 20;  //Sets the speed of rotation

.rotation-container {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 100px;
    left: 200px;
    transform: rotate(90deg);
    animation: rotation #{$animation-duration}s infinite linear;
        &:hover {
        animation-play-state: paused;
            .item-container {
            animation-play-state: paused;
        }
            .item {
            animation-play-state: paused;
        }
    }

    .item-container {
        position: absolute;
        animation: backwards-rotation #{$animation-duration}s infinite linear;
    }
        .item-container-1 {
        bottom: -60px;
        left: -110px;
    }
        .item-container-2 {
        top: -60px;
        left: -110px;
    }
        .item-container-3 {
        left: 10px;
        bottom: 145px;
    }
        .item-container-4 {
        top: -60px;
        right: -110px;
    }
        .item-container-5 {
        bottom: -60px;
        right: -110px;
    }
        .item-container-6 {
        left: 10px;
        top: 145px;
    }

    .item {
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 12px;
        background-color: $red;
        animation: scaling #{$animation-duration}s infinite linear;
    }
        .item-1 {
        animation-delay: #{($animation-duration/6*6)+$animation-duration/6-2*$animation-duration}s;
    }
        .item-2 {
        animation-delay: #{($animation-duration/6*5)+$animation-duration/6-2*$animation-duration}s;
    }
        .item-3 {
        animation-delay: #{($animation-duration/6*4)+$animation-duration/6-2*$animation-duration}s;
    }
        .item-4 {
        animation-delay: #{($animation-duration/6*3)+$animation-duration/6-2*$animation-duration}s;
    }
        .item-5 {
        animation-delay: #{($animation-duration/6*2)+$animation-duration/6-2*$animation-duration}s;
    }
        .item-6 {
        animation-delay: #{($animation-duration/6*1)+$animation-duration/6-2*$animation-duration}s;
    }
}