Realizzare carte animate con Transizioni e Animazioni CSS3

Oggi vediamo come realizzare un set di 3 carte utilizzando esclusivamente i CSS3! Niente jQuery questa volta! Andremo a sfruttare in particolar modo le proprietà di rotazione e le transizioni.

Nel DOM solo Ul e Li

La struttura HTML di cui ci serviamo presenta semplicemente un lista disordinato in cui, ad ogni li andiamo ad assegnare un ID unico affinchè possiamo interagire con la proprietà CSS3 di rotazione in modo diversificato:

<div id="container">
	<ul id="carte" class="clearfix">
		<li id="carta-1">
			<h2>Carta 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ante et lectus convallis consectetur. Maecenas quis turpis tellus, sit amet aliquam urna. Sed nec suscipit metus. Pellentesque dignissim commodo lectus, id vulputate neque hendrerit vel. Nulla dictum bibendum eros id accumsan. Aenean ut purus nulla. Integer faucibus volutpat odio sit amet ornare. Nunc orci metus, euismod nec vehicula sed, aliquam sed turpis. Vivamus eget ultrices neque. Sed viverra egestas tristique. Fusce tincidunt vulputate urna et commodo. Curabitur feugiat semper eros quis rhoncus. Duis orci mauris, pretium sed accumsan id, ornare non ligula. </p>
		</li>
		<li id="carta-2">
			<h2>Carta 2</h2>
			<p>Quisque rutrum lacus et nunc porta in congue nunc sagittis. Phasellus et mauris at elit condimentum bibendum. In nisi magna, imperdiet rhoncus egestas non, aliquam id justo. Sed vel elit est, id dictum ipsum. Integer ultricies sagittis lorem non semper. Maecenas sit amet imperdiet odio. Vestibulum tempus, metus a aliquam tincidunt, justo arcu elementum nunc, eget commodo ante sapien ac odio. Morbi cursus, nisl ac rhoncus sollicitudin, erat velit placerat elit, nec commodo lorem dolor sed elit. Praesent rutrum, est ut blandit pulvinar, tortor elit eleifend nulla, vel vulputate libero felis eget ligula.</p>
		</li>
		<li id="carta-3">
			<h2>Carta 3</h2>
			<p>Morbi eu massa sit amet turpis dignissim porta. Phasellus eget justo quis augue fermentum consectetur. Cras ac nunc quis nunc bibendum rhoncus. Ut aliquam, risus id pharetra sagittis, neque tellus aliquam risus, nec condimentum nunc neque a urna. Nam ut magna vel est suscipit cursus. Cras a rutrum nibh. Suspendisse id nisl magna, eu tincidunt nulla. Nullam adipiscing, sem et euismod iaculis, felis orci mollis risus, nec viverra turpis velit ut elit. Vestibulum a eros vel nunc ullamcorper mattis.</p>
		</li>
	</ul>
</div>

CSS3, rotazioni ed animazioni

Di per sè il codice che utilizziamo non è complesso, è semplicemente un po’ lungo da scrivere, soprattutto a causa dei numerosi prefissi che siamo costretti ad usare per cercare di ampliare un minimo il bacino di utenti che potranno osservare il nostro capolavoro :D! Vi riporto il codice CSS per intero, poi analizziamo i punti più interessanti. Se volete fare a meno dei prefissi potete avventurarvi nella sperimentazione di prefixfree, uno script che farà il lavoro sporco per noi!

#container {
	width:760px;
	margin:0 auto;
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	padding-top:50px;
}
#carte {
	margin:0;
	padding:0;
	}
#carte li {
	background:#333;
	margin:0;
	color:#fff;
	height:450px;
	width:200px;
	font-size:12px;
	display:block;
	float:left;
	border:1px solid #666;
	padding:10px;
	position:relative;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-box-shadow: 2px 2px 10px #000;
	box-shadow: 2px 2px 10px #000;
	-webkit-box-shadow: 2px 2px 10px #000;
	-moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-moz-text-shadow:1px 1px 1px #000;
	-webkit-text-shadow:1px 1px 1px #000;
	text-shadow:1px 1px 1px #000;
}
#carta-1 {
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(-20deg);
	z-index:1;
	left:150px;
	top:40px;
}
 
#carta-2 {
	z-index:2;
	left:70px;
	top:10px;
}
 
#carta-3 {
	-webkit-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-ms-transform: rotate(-20deg);
	transform: rotate(20deg);
    top: 50px;
	right:10px;
    z-index:3;
}
#carte li:hover {
	z-index:4;
	background:#f90;
	color:#333;
	-moz-text-shadow:1px 1px 0px #fff;
	-webkit-text-shadow:1px 1px 0px #fff;
	text-shadow:1px 1px 0px #fff;
}
 
#carta-1:hover {
	-moz-transform: scale(1.1) rotate(-18deg);
	-webkit-transform: scale(1.1) rotate(-18deg);
	-ms-transform: scale(1.1) rotate(-18deg); 
	transform: scale(1.1) rotate(-18deg);
}
 
#carta-2:hover {
	-moz-transform: scale(1.1) rotate(-2deg);
	-webkit-transform: scale(1.1) rotate(-2deg);
	-ms-transform: scale(1.1) rotate(-2deg); 
	transform: scale(1.1) rotate(-2deg); 
}
 
#carta-3:hover {
	-moz-transform: scale(1.1) rotate(18deg);
	-webkit-transform: scale(1.1) rotate(18deg); 
	-ms-transform: scale(1.1) rotate(-18deg); 
	transform: scale(1.1) rotate(18deg);
}

Tralasciamo box-shadow, bordi e smancierie puramente estetiche. Quello che fondamentalmente ci interessa sono le proprietà transition e transform.
In particolare utilizzando transition: all 0.5s ease-in-out diciamo al browser che, nel momento in cui inizia la nostra azione, deve avvenire una transizione di tutte le proprietà (all) da uno stato all’altro (solitamente hover) in 0.5 secondi utilizzando una determinata curva (ease-in-out).

Con la proprietà transform: scale(1.1) rotate(18deg); invece definiamo una trasformazione dell’oggetto rispetto alla posizione originale. In particolare ne alteriamo le dimensioni (scale) e lo ruotiamo di tot gradi (rotate).
La combinazione delle due proprietà permette il passaggio graduale come mostrato nell’esempio. Relativamente semplice no?