Vajíčková mánie Vajíčková mánie
Od 15. do 21.4. slevy 20 až 80% v sekci C/C++. Když ne teď, tak kdy?
Vyšlehej si extra vědomosti! Až 100% bodů na prémiový obsah zdarma! Více zde

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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

3D carousel
3d_carousel.html

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

 

 

Aktivity (1)

 

 

Komentáře

Avatar
Nataliya Tahova:20.1.2018 22:34

Děkuji moc, podařilo se mi pouzit tvůj navrh. :-) :-) :-) :-)

 
Odpovědět 20.1.2018 22:34
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.