Získej svůj iPhone v nové soutěži! Získej svůj iPhone v nové soutěži!
Nová překladatelská soutěž ITnetwork.cz o telefon iPhone, sluchátka Beats a další věcné ceny za 4 hodiny práce.
Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

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

HTML a CSS Profesionální webdesign Otáčecí carousel s 3D efektem v čistém CSS

Unicorn College ONEbit hosting 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;
        }
}

 

 

Článek pro vás napsal Motlja
Avatar
Jak se ti líbí článek?
6 hlasů
Miniatura
Předchozí článek
Flexibilní text
Miniatura
Všechny články v sekci
Profesionální webdesign v CSS 3
Aktivity (1)

 

 

Komentáře

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.

Zatím nikdo nevložil komentář - buď první!