3D flip immagine sulla tua pagina web. Proprieta perspective e trasform nei CSS

In questa lezione imparerai come creare un effetto 3D su esempio di una immagine  che ruota (immagine  rotabile). Con il passaggio del puntatore del mouse sopra contenitore( nel nostro esempio sarà una immagine ma può essere qualsiasi elemento) i  blocchi interni cominciano a ruotare lungo l'asse Y, e al inizio il lato opposto non è visibile.

Con questa tecnica  è possibile organizzare in modo efficiente lo spazio su una pagina web del vostro sito inserendo le relative informazioni su entrambi i lati di un elemento puo essere una immagine o on blocco con duel lati.

Proprieta perspective come la base del effeto 3D

.

Corso html

Da questo corso imparerai linguaggo HTMl, cosa sono i tag, come creare 3 tipi di liste, liste ordinate, non ordinate, con descrizione. Imparerai cosa sono gli attributi del tag.

ioeweb.it

Imparerai gerarchia degli attributi, come installare server locale, perché senza di questo non potrai provare il tuo sito in modo coretto.

Vediamo il codice html del nostro blocco rotante

<div class="container">
  <div class="flipper">
    <div class="front">
      <div class="header">
        <i class="fa fa-creative-commons fa-2x"></i>
        <h3>wedding Agency</h3>
      </div>
      <p>Sed ut perspiciatis unde omnis...</p>
      </div>
    <div class="back">
      <h3>about us</h3>
      <p>Nemo enim ipsam voluptatem quia...</p>
      </div>
    </div>
</div>

In primo luogo, vediamo di creare la  prospettiva 3D  per l'unità esterna, aggiungendo ad esso la profondità . Maggiore è il valore della prospettiva,  minore sarà l'effetto di profondità. Per centrare il nostro blocco al centro della pagina agiungeremo il valore di  larghezza .

.container {
  text-align: center;
  width: 320px;
  margin: 20px auto;
  -webkit-perspective: 1200;
  -moz-perspective: 1200;
  perspective: 1200;
}

Al lato nascosto  assegneremo  transform-style: preserve-3d , in modo che elementi figli rimangono anche posizionati nello spazio tridimensionale.

.flipper {
  position: relative;
  width: 320px;
  height: 280px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: .7s linear;
  -moz-transition: .7s linear;
  -o-transition: .7s linear;
  transition: .7s linear;
} 

Assegneremo al lato visibile e quello nascosto proprieta backface-visibility: hidden per nascondere ciascuna delle parti al momento della rotazione.
.flipper {
  .front, .back {
  font-family: 'Cabin', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 40px 20px 20px;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.front {
  z-index: 2;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  background: white;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #f5f5f5;
}
i {
  color: #DCB8B2;
  display: inline-block;
  margin-bottom: 15px;
}
h3 {
  font-size: 16px;
  line-height: 20px;
  text-transform: uppercase;
  margin: 0 0 15px;
}
p {
  font-size: 14px;
  line-height: 25px;
}
.header h3 {
  color: #18191a;
}
.front p {
  color: #818285;
}

Proprieta transform per rotare il blocco.

Visualizziamo il lato nascosto rispecchiandolo, in modo che al momento di rotazione il contenuto del blocco vene visualizzato da sinistra a destra.

.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  background: #DCB8B2;
  color: white;
}
.back h3 {
  position: relative;
}
.back h3:after {
  content: "";
  width: 50px;
  height: 1px;
  position: absolute;
  bottom: -10px;
  left: 50%;
  background: white;
  margin-left: -25px;
}
.back p {
  padding-top: 15px;
}

Aggiungeremo rotazione a 180 gradi al momento del passaggio del mouse(hover) utilizzando la proprieta transform

.container:hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

Ovvio che puoi sempre modificare le varie proprietà CSS e se non sai come, scoprilo dai nostri corsi in primo luogo dal video corso gratuito linguaggio CSS

Letto 1073 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso