La proprietà css transform ti permette di creare ottimi effetti grafici senza utilizzare neanche una riga di javascript.
Qui di seguito mostriamo un esempio su come creare un effetto cards come si può vedere qui sotto
Per cominciare ci servono 2 file uno che chiameremo cards.html e uno che chiameremo cards.css e le 2 immagini(o più) delle nostre cards.
Apriamo il nostro file cards.html e creiamo la nostra semplice struttura:
<!DOCTYPE html>
<html>
<head>
<title> Cards - Codeplus </title>
<link rel="stylesheet" type="text/css" href="cards.css">
</head>
<body>
<div class="container">
<div class="carta" id="carta_prima"> </div>
<div class="carta" id="carta_seconda"> </div>
</div>
</body>
</html>
Come si può notare la struttura in html è davvero semplice creiamo un contenitore e due div per le nostre 2 cards (possiamo crearne di più se vogliamo aggiungere cards).
Ora vediamo la parte in css:
body { background-color:white; }
.container { width:900px;
margin:auto; }
#carta_prima { background-image:url(carta1.jpg); }
#carta_seconda { background-image:url(carta2.jpg); }
.carta { width:293px;
height:400px;
margin-top:100px;
float:left;
transform:skew(0deg,-20deg) scaleX(0.6);
transition:transform 1s;
box-shadow: 0px 10px 30px rgba(0,0,0,0.20);
position:relative;
border-radius:10px; }
.carta:hover { transform:skew(0,0) scale(1.45);
z-index:999; }
Concentriamoci subito sulle proprietà date alla classe carta.
- Transform: skew(0deg,-20deg), con il valore skew "transformiamo" l'immagine facendola girare attorno all'asse delle X di 20gradi, mentre il valore per l'asse delle y rimane invariato.
- transform:scaleX(0.6), per dare un effetto ottico corretto alle cards dobbiamo anche ridurle in larghezza e questo è quello che fa' scaleX(0.6) riducendo la larghezza al 60%;
- transition:transform 1s, diamo la lunghezza dell'effetto che verrà poi richiamato dal nostro hover in un secondo. Se vogliamo aumentare la velocità dell'effetto possiamo diminuire o in caso contrario aumentare tale valore.
Le proprietà della classe carta verranno modificate ogni volta che passeremo sulle cards con il mouse grazie a carta:hover.
Con la proprietà transform e transition si possono fare numerosissimi effetti senza scrivere una riga di javascript.
Commenti
Ancora nessun commento per questo articolo