Effetti animati al passaggio del mouse (hover) Pronti al uso

Nel tutorial di oggi vediamo gli effetti al passaggio del mouse sui cerchi. Dato che  abbiamo nella disposizione proprietà CSS che gestiste arrotondamento dei angoli, possiamo creare forme circolari che ultimamente sono molto usati in design nei siti web.

Uso di forme circolari crea un atteggiamento piacevole forse perche ci saimo gia stancati di soliti retangoli e quadrati o forse proprio perche sono piu dolci .

Quindi oggi vediamo come creare picoli animazioni che posiamo usare in vari situazioni come per esempio mostrare qualche descrizione che riguarda un prodotto o una persona .

Effetti animati al passaggio del mouse 7 esempi pronti al uso

Elementi di base

 

Markup html

Nei maggiore dei casi potrai usare una struttura html come quella che vedi sotto. Basta cambiare disegni, colori e il contenuto  

<ul class="ch-grid">
        <li>
                <div class="ch-item ch-img-1">
                        <div class="ch-info">
                                <h3>Usa quelllo che hai!</h3>
                                <p>La tua guida paratica <a href="http://ioeweb.it">Scopri di piu</a></p>
                        </div>
                </div>
        </li>
        <li>
                <div class="ch-item ch-img-2">
                        <div class="ch-info">
                                <h3>Sfrutta quello che puoi!</h3>
                                <p>La tua guida paratica <a href="http://ioeweb.it">Scopri di piu</a></p>
                        </div>
                </div>
        </li>
        <li>
                <div class="ch-item ch-img-3">
                        <div class="ch-info">
                                <h3>Trova di meglio!</h3>
                                <p>La tua guida paratica <a href="http://ioeweb.it">Scopri di piu</a></p>
                        </div>
                </div>
        </li>
</ul>

Anche se potremmo inserire delle  immagini subito qui, io direi di usarli come lo sfondo e inserirli nei CSS  nelle classi che iniziano con "ch-img-". Inoltre, avremo una sezione per la descrizione  con un titolo. Ora, pasiamo alla realizzazione di alcuni effetti al passaggio del mouse!

Stili  CSS

Definiamo uno stile comune per l'elenco e gli elementi dell'elenco:

.ch-grid {
        margin: 20px 0 0 0;
        padding: 0;
        list-style: none;
        display: block;
        text-align: center;
        width: 100%;
}
.ch-grid:after,
.ch-item:before {
        content: '';
    display: table;
}
.ch-grid:after {
        clear: both;
}
.ch-grid li {
        width: 220px;
        height: 220px;
        display: inline-block;
        margin: 20px;
}

 

Possiamo centrare gli elementi dell'elenco utilizzando proprietà  inline  e impostando la proprietà di allineamento del testo al centro.

Alcuni degli esempi avranno una struttura diversa, ma le esamineremo una per una in modo più dettagliato.

Vediamo prima che effetti di animazione al hover 

posiamo realiizare alla fine della lezione

 

Esempio 1

clicare per aprire e vedere il codice sorgente del primo esempio

Il primo esempio mostrera la descrizione fin ora nascosto ridimensionandola e animeremo anche l'ombra del cerchio al  interna dell'elemento. Quindi posizioniamo l'oggetto e impostiamo una bella ombreggiatura interna e una transizione per rendere passaggio e visualizzazione piu lento :

.ch-item {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        cursor: default;
        box-shadow: 
                inset 0 0 0 16px rgba(255,255,255,0.6),
                0 1px 2px rgba(0,0,0,0.1);
        transition: all 0.4s ease-in-out;
}

Come hai notato prima, abbiamo assegnato due classi all'elemento (non alla voce dell'elenco ma al suo figlio interno realizato con div): una è ct-item e l'altra sarà usata per definire un'immagine di sfondo :

.ch-img-1 { 
        background-image: url(../images/1.jpg);
}
.ch-img-2 { 
        background-image: url(../images/2.jpg);
}
.ch-img-3 { 
        background-image: url(../images/3.jpg);
}

La descrizione  sarà posizionata in modo assoluto e gli daremo uno sfondo semitrasparente impostando un valore RGBA. L'opacità al inizio sarà 0 e la grandezza ancghe  a 0 per nascondere inizialmente il contenuto:

.ch-info {
        position: absolute;
        background: rgba(63,147,147, 0.8);
        width: inherit;
        height: inherit;
        border-radius: 50%;
        overflow: hidden;
        opacity: 0;
        transition: all 0.4s ease-in-out;
        transform: scale(0);
}

Il titolo dell'elemento avrà  un certo padding e margini e un'ombreggiatura uniforme:

.ch-info h3 {
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 22px;
        margin: 0 30px;
        padding: 45px 0 0 0;
        height: 140px;
        font-family: 'Open Sans', Arial, sans-serif;
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3);
}

L'elemento del paragrafo anche esso al inizio mettiamo al  0 come opacità e aggiungeremo effetto di transizione (vogliamo mostrala al passaggio del mouse  ma con un certa durata nella visualizzazione ):
.ch-info p {
        color: #fff;
        padding: 10px 5px;
        font-style: italic;
        margin: 0 30px;
        font-size: 12px;
        border-top: 1px solid rgba(255,255,255,0.5);
        opacity: 0;
        transition: all 1s ease-in-out 0.4s;
}

Vediamo anche di impostare proprietà del link che sara scritto in maiuscolo e con passaggio del mouse il link cambierà colore in giallo  

.ch-info p a {
        display: block;
        color: rgba(255,255,255,0.7);
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 1px;
        padding-top: 4px;
        font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
        color: rgba(255,242,34, 0.8);
}

E ora il nostro effetto al hover.
Il nostro elemento sara  animato cambiando la sua ombra con riduzione del arrotondamento da 16px a 1px

.ch-item:hover {
        box-shadow: 
                inset 0 0 0 1px rgba(255,255,255,0.1),
                0 1px 2px rgba(0,0,0,0.1);
}

La descrizione apparirà dal nulla con aiuto della proprietà scala al 1(mostrare tutto) e opacità 1

.ch-item:hover .ch-info {
        transform: scale(1);
        opacity: 1;
}

E il paragrafo con descrizione anche esso vvera mostrato dal nula ma con un piccolo ritardo

.ch-item:hover .ch-info p {
        opacity: 1;
}

Esempio 2 della animazione al hover

Markup html e uguale al esempio precedente

In questo esempio useremo l'ombra  per riempire il nostro cerchio e servire come sfondo per la  descrizione.
Quindi, niente di speciale, solo l'ombra della scatola che ha un'altra riga con valori:

clicare per aprire e vedere il codice sorgente del secondo esempio

.ch-item {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        cursor: default;
        box-shadow: 
                inset 0 0 0 0 rgba(200,95,66, 0.4),
                inset 0 0 0 16px rgba(255,255,255,0.6),
                0 1px 2px rgba(0,0,0,0.1);
        transition: all 0.4s ease-in-out;
}

E vediamo di inserire qualche immagine come lo sfondo
.ch-img-1 { 
        background-image: url(../images/4.jpg);
}
.ch-img-2 { 
        background-image: url(../images/5.jpg);
}

La descrizione verrà ridimensionata di nuovo:

.ch-info {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        opacity: 0;
        transition: all 0.4s ease-in-out;
        transform: scale(0);
        backface-visibility: hidden;
}

E queti sono I stili per per il titolo e descrizione

.ch-info h3 {
        color: #fff;
        text-transform: uppercase;
        position: relative;
        letter-spacing: 2px;
        font-size: 22px;
        margin: 0 30px;
        padding: 65px 0 0 0;
        height: 110px;
        font-family: 'Open Sans', Arial, sans-serif;
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
        color: #fff;
        padding: 10px 5px;
        font-style: italic;
        margin: 0 30px;
        font-size: 12px;
        border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
        display: block;
        color: rgba(255,255,255,0.7);
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 1px;
        padding-top: 4px;
        font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
        color: rgba(255,242,34, 0.8);
}

Al passaggio del mouse animeremo l'ombra  interna (quella rossastra) a 110px di raggio di diffusione. Questo coprirà tutto il cerchio:

.ch-item:hover {
        box-shadow: 
                inset 0 0 0 110px rgba(200,95,66, 0.4),
                inset 0 0 0 16px rgba(255,255,255,0.8),
                0 1px 2px rgba(0,0,0,0.1);
}

E scaleremo e mostreremo la descrizione:

.ch-item:hover .ch-info {
        opacity: 1;
        transform: scale(1);    
}

Esempio 3

In questo esempio, giocheremo con la rotazione. La struttura sarà leggermente diversa dai primi due esempi poiché è necessario inserire il primo elemento visivo come secondo blocco. Quindi l'elemento della lista avrà  seguente aspetto:

clicare per aprire e vedere il codice sorgente del terzo esempio

<li>
        <div class="ch-item">   
                <div class="ch-info">
                        <h3>Poster musicale</h3>
                        <p>ioeweb.it <a href="htt://ioeweb.it">Fatto da me </a></p>
                </div>
                <div class="ch-thumb ch-img-1"></div>
        </div>
</li>

Impostiamo parametri per il nostro contenitore con coperchio e contenuto nascosto  (con un'ombra  sottile):
.ch-item {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        cursor: default;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

Per elemento inizialmente visivo dovremo specificare il punto iniziale di trasformazione (per esempio  sulla destra al centro o in basso al centro ) e una transizione. Perché lo vogliamo ruotare come un coperchio al passaggio del mouse e mostrare contenuto che si trova sotto:
.ch-thumb {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
        transform-origin: 95% 40%;
        transition: all 0.3s ease-in-out;
}

Usando la pseudo-classe: after creeremo un piccolo cerchio nero come punto di fissazione del nostro coperchio con aiuto di gradiente radiale:
.ch-thumb:after {
        content: '';
        width: 8px;
        height: 8px;
        position: absolute;
        border-radius: 50%;
        top: 40%;
        left: 95%;
        margin: -4px 0 0 -4px;
        background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
        box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

Non dimentichiamo di definire immagini di sfondo per ogni elemento nascosto
.ch-img-1 { 
        background-image: url(../images/7.jpg);
        z-index: 12;
}
.ch-img-2 { 
        background-image: url(../images/8.jpg);
        z-index: 11;
}

E definiamo anche come appariranno le nostre descrizioni e il titolo

.ch-info {
        position: absolute;
        width: inherit;
        height: inherit;
        border-radius: 50%;
        overflow: hidden;
        background: #c9512e url(../images/noise.png);
        box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}
.ch-info h3 {
        color: #fff;
        text-transform: uppercase;
        position: relative;
        letter-spacing: 2px;
        font-size: 18px;
        margin: 0 60px;
        padding: 22px 0 0 0;
        height: 85px;
        font-family: 'Open Sans', Arial, sans-serif;
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
        color: #fff;
        padding: 10px 5px;
        font-style: italic;
        margin: 0 30px;
        font-size: 12px;
        border-top: 1px solid rgba(255,255,255,0.5);
}

E per evidenziare nostro link creeremo  sarà un piccolo cerchio che dovrebbe spostarsi dalla destra al passaggio del mouse:
.ch-info p a {
        display: block;
        color: #333;
        width: 80px;
        height: 80px;
        background: rgba(255,255,255,0.3);
        border-radius: 50%;
        color: #fff;
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 1px;
        padding-top: 24px;
        margin: 7px auto 0;
        font-family: 'Open Sans', Arial, sans-serif;
        opacity: 0;
        transition: 
                transform 0.3s ease-in-out 0.2s,
                opacity 0.3s ease-in-out 0.2s,
                background 0.2s linear 0s;
        transform: translateX(60px) rotate(90deg);
}
.ch-info p a:hover {
        background: rgba(255,255,255,0.5);
}

Dato che voglio  che il movimento del cerchio picolo  e l'opacità si manifestano con ritardo rispetto apertura del coperchio dovro separare le  transizioni.
Al passaggio del mouse ruoteremo il pollice e sposteremo / ruoteremo l'elemento con link al interno:

.ch-item:hover .ch-thumb {
        box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
        transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
}

Esempio 4

Il quarto esempio riguarderà alcune rotazioni 3D. Quindi, abbiamo bisogno di regolare la struttura in modo da avere un contenitore per realizzare  prospettiva e lati  fronte e retro. Quindi, le voci dell'elenco appariranno come segue:

clicare per aprire e vedere il codice sorgente del quarto esempio

<li>
        <div class="ch-item ch-img-1">                          
                <div class="ch-info-wrap">
                        <div class="ch-info">
                                <div class="ch-info-front ch-img-1"></div>
                                <div class="ch-info-back">
                                        <h3>Esempio 4</h3>
                                        <p>La tua guida <a href="http://ioeweb.it">Scopri di piu</a></p>
                                </div>  
                        </div>
                </div>
        </div>
</li>

Come puoi notare abbiamo aggiunto la stessa immagine si al contenitore principale realizzato con div con la classe item e anche alla parte rotante sulla fronte.
Il trucco è di dare lo stesso background all'elemento che contiene informazioni  e al  corpo. Questo darà l'illusione come se il nostro oggetto avesse un buco.
Il nostro contenitore  avrà il solito stile:

.ch-item {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        cursor: default;
}

Un involucro in piu  verrà utilizzato per la prospettiva e aggiungeremo anche una transizione per aggiungere  l'ombra :
.ch-info-wrap{
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        perspective: 800px;
        transition: all 0.4s ease-in-out;
        top: 20px;
        left: 20px;
        background: #f9f9f9 url(../images/bg.jpg);
        box-shadow: 
                0 0 0 20px rgba(255,255,255,0.2), 
                inset 0 0 3px rgba(115,114, 23, 0.8);
}

Il div ch-info  avrà bisogno di preserve-3d come lo stile di trasformazione e per esso indicheremo anche transizione poiché questo è l'elemento che ruoteremo in 3d:
.ch-info{
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        transition: all 0.4s ease-in-out;
        transform-style: preserve-3d;
}

Il fronte e il retro avranno i seguenti stili comuni:

.ch-info > div {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-position: center center;
        backface-visibility: hidden;
}

Il retro sara ruotato in modo che non lo vedremo inizialmente:

.ch-info .ch-info-back {
        transform: rotate3d(0,1,0,180deg);
        background: #000;
}

E di nuovo le immagini per lo sfondo
.ch-img-1 { 
        background-image: url(../images/10.jpg);
}
.ch-img-2 { 
        background-image: url(../images/11.jpg);
}

E puoi elementi di testo e intestazione

.ch-info h3 {
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 14px;
        margin: 0 15px;
        padding: 40px 0 0 0;
        height: 90px;
        font-family: 'Open Sans', Arial, sans-serif;
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
        color: #fff;
        padding: 10px 5px;
        font-style: italic;
        margin: 0 30px;
        font-size: 12px;
        border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
        display: block;
        color: rgba(255,255,255,0.7);
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 1px;
        padding-top: 4px;
        font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
        color: rgba(255,242,34, 0.8);
}

Al passaggio del mouse, modifichiamo l'ombra del contenitore e ruotiamo il coperchio al interno per mostrare il retro:

.ch-item:hover .ch-info-wrap {
        box-shadow: 
                0 0 0 0 rgba(255,255,255,0.8), 
                inset 0 0 3px rgba(115,114, 23, 0.8);
}
.ch-item:hover .ch-info {
        transform: rotate3d(0,1,0,-180deg);
}

Esempio 5

In questo esempio vogliamo ridimensionare la parte interna della miniatura a 0 e far apparire l'elemento description facendolo svanire e ridimensionarlo a 1.
La struttura del quinto esempio sarà la stessa dell'esempio precedente.
Contenitore avra il  solito stile:

clicare per aprire e vedere il codice sorgente del quinto esempio

.ch-item {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        cursor: default;
}

Involucro del div con la descrizione e del div info  avrano gli stili uguali :
.ch-info-wrap, 
.ch-info{
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
}

Facciamo ancora il trucco del "buco" impostando lo stesso sfondo sul involucro e sulla parte inetrna con il testo :
.ch-info-wrap {
        top: 20px;
        left: 20px;
        background: #f9f9f9 url(../images/bg.jpg);
        box-shadow: 
                0 0 0 20px rgba(255,255,255,0.2), 
                inset 0 0 3px rgba(115,114, 23, 0.8);
}

Lo stile comune per  "fronte" e "retro" (anche se in realta non è più  fronte e retro) è comune:
.ch-info > div {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-position: center center;
}

Il "fronte" avrà una transizione (si ridimensionerà e scomparirà):

.ch-info .ch-info-front {
        transition: all 0.6s ease-in-out;
}

E il retro che contiene la descrizione avrà inizialmente 0 come opacità e sarà ridimensionato fino a 1,5:

.ch-info .ch-info-back {
        opacity: 0;
        background: #223e87;
        pointer-events: none;
        transform: scale(1.5);
        transition: all 0.4s ease-in-out 0.2s;
}

Abbiamo bisogno di impostare pointer-events: none; dal momento che non vogliamo che l'elemento "blocchi" tutto il resto ... ricorda, è scalato, non possiamo vederlo a causa della sua opacità, ma è lì.

Immagini di sfondo ed elementi tipografici come al solito, solo che abbiamo modificato alcuni colori :

.ch-img-1 { 
        background-image: url(../images/13.jpg);
}
.ch-img-2 { 
        background-image: url(../images/14.jpg);
}
.ch-info h3 {
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 18px;
        margin: 0 15px;
        padding: 40px 0 0 0;
        height: 80px;
        font-family: 'Open Sans', Arial, sans-serif;
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
        color: #fff;
        padding: 10px 5px 0;
        font-style: italic;
        margin: 0 30px;
        font-size: 12px;
        border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
        display: block;
        color: #e7615e;
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 1px;
        padding-top: 4px;
        font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
        color: #fff;
}

Al passaggio del mouse, ridimensioniamo la parte interna della miniatura a 0 e impostiamo l'opacità su 0. Questo lo farà scomparire nella parte posteriore.

.ch-item:hover .ch-info-front {
        transform: scale(0);
        opacity: 0;
} 

La parte che contiene la descrizione verrà ridimensionata a 1 e sbiadita. Imposteremo l'evento puntatore su auto ritornimo allo stato normale , perché ora vogliamo essere in grado di fare clic sul link:

.ch-item:hover .ch-info-back {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
}

 

Esempio 6

 

In questo esempio vogliamo capovolgere la parte interna della miniatura per rivelare la descrizione. L'HTML sarà lo stesso come nei due esempi precedenti.

La base sarà stilizzata come prima:

clicare per aprire e vedere il codice sorgente del sesto esempio

.ch-item {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        cursor: default;
}

 

Lo stile comune del wrapper e l'elemento con descrizione:

.ch-info-wrap, 
.ch-info{
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        transition: all 0.4s ease-in-out;
}

 

Il wrapper avrà effetto di prospettiva:

.ch-info-wrap {
        top: 20px;
        left: 20px;
        background: #f9f9f9 url(../images/bg.jpg);
        box-shadow: 
                0 0 0 20px rgba(255,255,255,0.2), 
                inset 0 0 3px rgba(115,114, 23, 0.8);
        perspective: 800px;
}

 

L'elemento con informazioni avrà bisogno del seguente stile di trasformazione:

.ch-info {
        transform-style: preserve-3d;
}

 

Il fronte e il retro avranno efeto di transizione. Nota che questa volta non imposteremo la visibilità del backface in hidden, dal momento che vogliamo che il retro della parte della miniatura interna venga mostrata quando la ruotiamo verso il basso:

.ch-info > div {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-position: center center;
        transition: all 0.6s ease-in-out;
}

 

Impostiamo la corretta origine di trasformazione in modo che possiamo aprirla verso sotto:

.ch-info .ch-info-front {
        transform-origin: 50% 100%;     
        z-index: 100;
        box-shadow: 
                inset 2px 1px 4px rgba(0,0,0,0.1);
}

Imposteremo un valore RGBA con 0 opacità sullo sfondo della parte con descrizioni:

.ch-info .ch-info-back {
        background: rgba(230,132,107,0);
}

E il solito stile per gli altri elementi:

.ch-img-1 { 
        background-image: url(1.jpg);
}
 
.ch-info h3 {
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 14px;
        margin: 0 25px;
        padding: 40px 0 0 0;
        height: 90px;
        font-family: 'Open Sans', Arial, sans-serif;
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
        color: #fff;
        padding: 10px 5px;
        font-style: italic;
        margin: 0 30px;
        font-size: 12px;
        border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
        display: block;
        color: rgba(255,255,255,0.7);
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 1px;
        padding-top: 4px;
        font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
        color: rgba(255,242,34, 0.8);
}

 

Al passaggio del mouse, ruoteremo la parte anteriore verso basso e animeremo leggermente l'ombra del contenitore. La parte posteriore verrà mostrata con il suo proprio colore di sfondo:

.ch-item:hover .ch-info-front {
        transform: rotate3d(1,0,0,-180deg);
        box-shadow: 
                inset 0 0 5px rgba(255,255,255,0.2), 
                inset 0 0 3px rgba(0,0,0,0.3);
}
.ch-item:hover .ch-info-back {
        background: rgba(230,132,107,0.6);
}

 

Esempio 7

L'ultimo esempio si comporta come un cubo rotante in cui riveliamo la descrizione ruotando il cubo. Dato che ruoteremo ciascuna delle facce, non avremo bisogno di un involucro aggiuntivo. Quindi, il nostro HTML avrà il seguente aspetto:

 

clicare per aprire e vedere il codice sorgente del setimo esempio

<li>
        <div class="ch-item">                           
                <div class="ch-info">
                        <div class="ch-info-front ch-img-1"></div>
                        <div class="ch-info-back">
                                <h3>Mouse</h3>
                                <p>La tua guida di webmaster <a href="http://ioeweb.it"> Scopri di piu</a></p>
                        </div>  
                </div>
        </div>
</li>

 

Daremo un valore prospettico contenitore principale :

.ch-item {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: relative;
        cursor: default;
        perspective: 900px;
}

L'elemento con la classe ch-info avrà bisogno di proprieta preserve-3d:

 

.ch-info{
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
}

 

La parte anteriore e quella posteriore avranno una transizione e l'origine della trasformazione sarà impostata su 50% 0%:

.ch-info > div {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-position: center center;
        transition: all 0.4s linear;
        transform-origin: 50% 0%;
}

Mettiamo una bella ombra  nella parte frontale:

.ch-info .ch-info-front {
        box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}

Il backface verrà ruotato inizialmente per apparire come la faccia inferiore di un cubo:

.ch-info .ch-info-back {
        transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
        background: #000;
        opacity: 0;
}

 

E il solito stile per le immagini di sfondo e gli elementi di testo:

.ch-img-1 { 
        background-image: url(1.jpg);
}
 
.ch-info h3 {
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 24px;
        margin: 0 15px;
        padding: 60px 0 0 0;
        height: 110px;
        font-family: 'Open Sans', Arial, sans-serif;
        text-shadow: 
                0 0 1px #fff, 
                0 1px 2px rgba(0,0,0,0.3);
}
.ch-info p {
        color: #fff;
        padding: 10px 5px;
        font-style: italic;
        margin: 0 30px;
        font-size: 12px;
        border-top: 1px solid rgba(255,255,255,0.5);
}
.ch-info p a {
        display: block;
        color: rgba(255,255,255,0.7);
        font-style: normal;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 1px;
        padding-top: 4px;
        font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
        color: rgba(255,242,34, 0.8);
}

 

Useremo translate3d per spostare la parte anteriore sull'asse Y del nostro spazio 3d e ruotare3d per ruotarlo effettivamente. Vediamo anche di nasconderla questa parte applicando opacità 0  :

 

.ch-item:hover .ch-info-front {
        transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
        opacity: 0;
}

 

Il backface sarà ruotato "indietro" ala posizione di 0 gradi di rotazione (ricorda, inizialmente è stato ruotato verso il basso):

.ch-item:hover .ch-info-back {
        transform: rotate3d(1,0,0,0deg);
        opacity: 1;
}

E questo è tutto! Un sacco di effetti al passaggio del mouse che presentano molte varianti diverse, provali e costruisci qualcosa del proprio!

Questo tutorial e un ottimo materiale per capire varie proprietà di trasformazione cominciandod da quelli semplici e finendo con quelli a prima vista dificili come punto di rotazione e rotazione 3d per esempio.

 
Letto 378 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