Benvenuti su Vivacity Design

Con poche righe di CSS ed un utilizzo sapiente della prospettiva é possibile creare interessanti animazioni 3D; in questo breve articolo propongo una galleria di sei immagini rotanti che cambiano angolazione durate il ciclo di animazione. Il ciclo si ripete all' infinito, é possibile customizare in molti modi la galleria, cambiando angolazione, prospettiva, dimensione e formattazione delle' immagini, durata del ciclo (e quindi la sua velocità), ed assegnando ad ognuna delle immagini una posizione angolare diversa creando poligoni diversi.

<div class="container">
  <div class="gallery">
    <img src="https://picsum.photos/id/1059/300/300" alt="many clothes and pictures">
    <img src="https://picsum.photos/id/1060/300/300" alt="someone preparing artisanal coffee">
    <img src="https://picsum.photos/id/225/300/300" alt="some tee">
    <img src="https://picsum.photos/id/163/300/300" alt="an empty table in a restaurant">
    <img src="https://picsum.photos/id/180/300/300" alt="a laptop with a notebook">
    <img src="https://picsum.photos/id/180/300/300" alt="a laptop with a notebook">
  </div>
</div>

gallery {
    display: grid;
  transform-style: preserve-3d;
  animation: r 15s ease infinite;
  position: relative;
}
@keyframes r {
  0% {
    transform: perspective(400px) rotateX(90deg) rotate(0deg);
  }
  to {
    transform: perspective(400px) rotateX(-90deg) rotate(-360deg);
  }
}
.gallery > img {
  grid-area: 1/1;
  width: 150px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  transform: rotate(var(--_a)) translateY(120%) rotateX(90deg);
}
.gallery > img:nth-child(1) {
  --_a: 0deg;
}
.gallery > img:nth-child(2) {
  --_a: 60deg;
}
.gallery > img:nth-child(3) {
  --_a: 120deg;
}
.gallery > img:nth-child(4) {
  --_a: 180deg;
}
.gallery > img:nth-child(5) {
  --_a: 240deg;
}
.gallery > img:nth-child(6) {
  --_a: 300deg;
}

.container {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #000;
  overflow: hidden;
}

.gallery:hover {
  animation-play-state: paused;
}