C/C++ week November Black Friday
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Pouze tento týden sleva až 80 % na e-learning týkající se C/C++

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.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Niesomtu Hraskova:28. dubna 18:18

Velmi nápomocné a jednoduché

Odpovědět
28. dubna 18:18
Víte, jaké adresy jsou nejvíce zadávány v prohlížeči MS Internet Explorer? https://www.mozilla.com/firefox/ https://w...
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.