C# týden ITnetwork Flashka zdarma
Akce! Pouze tento týden sleva až 80 % na kurzy C# .NET. Lze kombinovat s akcí 50 % bodů navíc na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!

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
Avatar
Niesomtu Hraskova:28. dubna 18:18

Velmi nápomocné a jednoduché

 
Odpovědět 28. dubna 18:18
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 2 zpráv z 2.