Slevový týden - Srpen
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy.

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

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

 

Všechny články v sekci
Profesionální webdesign v CSS 3
Článek pro vás napsal Motlja
Avatar
Jak se ti líbí článek?
7 hlasů
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.4.2019 18:18

Velmi nápomocné a jednoduché

Odpovědět
28.4.2019 18:18
Hľadám si prácu, tak mi smelo napíš mail.
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.