Otáčací carousel s 3D efektom v čistom CSS

Animovaný carousel pre niekoľko itemov, ktorá sa otáča dokolečka. Itemy vpredu sú väčšie ako tie vzadu, čo vytvára 3D efekt. Animácia iba cez CSS bez JS.

Živá ukážka

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;
    }
}