codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Book Preview</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: #eaeaea;
}
/* -- Contenitore principale -- */
.scheda-opera {
width: 550px;
margin: 10px auto;
padding: 0 0 10px;
box-sizing: border-box;
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
font: 1rem/1 Candara,Arial,sans-serif;
color: #64696a;
text-align: justify;
perspective: 1000px;
perspective-origin: 150px 150px;
}
/* -- Intestazione -- */
.titolo-opera {
margin: 0;
padding: 1rem .1rem;
color: #2a2c9a;
font: bold 1.5em/1 "Book Antiqua",Georgia,serif;
text-align: center;
}
.titolo-opera>span{
display: block;
margin: 0;
padding: .2rem .1rem;
font: .8rem/1 Candara,Arial,sans-serif;
text-transform: uppercase;
text-align: center;
}
/* -- Descrizione (paragrafi) -- */
.scheda-opera>p {
margin: 12px;
}
/* -- Linee separatrici -- */
.titolo-opera>span:before,
.scheda-opera:after {
content: "";
display: block;
width: 10%;
height: .6rem;
margin: .6rem auto 0;
border-top: 1px dotted #64697a;
clear: both;
}
/* -- Copertina con effetto 3D -- */
/* - Retro - */
.copertina {
display: inline-block;
float: left;
position: relative;
margin: 12px 18px 15px 15px;
box-shadow: inset -4px 0px 15px -8px #000, 0px 8px 15px -4px #333, 20px 20px 20px -20px rgba(0,0,0,.1);
transition: transform .5s ease;
perspective: 10000px;
transform-origin: 40% 0 20px;
transform-style: preserve-3d;
transform: rotateY(-25deg);
}
/* - Fronte (immagine) - */
.copertina>img {
width: auto;
max-width: 200px;
max-height: 200px;
vertical-align: middle;
outline: 1px solid transparent; /* Aiuta a smussare i bordi frastagliati in Firefox */
transform: translateZ(20px);
/* Fix IE. Non supporta il preserve-3d che applica il 3D su elementi annidati, quindi bisogna prenderlo in giro in qualche modo per simulare l'effetto */
-ms-transform: translateX(-9px) scaleY(1.02);
transition: -ms-transform .5s ease;
}
/* - Inizializzazione pseudo-elementi per "Effetto satinato sull'immagine" e "Taglio davanti" - */
.copertina:before,
.copertina:after {
content: '';
position: absolute;
outline: 1px solid transparent; /* Aiuta a smussare i bordi frastagliati in Firefox */
}
/* - Effetto satinato sull'immagine - */
.copertina:before {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 1px solid;
border-color: #fff transparent #000 #fff;
opacity: .12;
background: linear-gradient(to top right, #fff, transparent, #555);
z-index: 1;
transition: opacity .5s ease, -ms-transform .5s ease;
transform-origin: 0 .5;
transform: translateZ(20px);
-ms-transform: translateX(-10px) scaleY(1.02); /* Fix IE */
}
/* - Taglio davanti - */
.copertina:after {
width: 20px;
height: calc(100% - 4px);
right: 2px;
top: 2px;
z-index: -1;
background: #eee;
background: linear-gradient(to top left, #ccc, #f5f5f5);
box-shadow: inset 10px 0 15px -12px #000, 0px 0px 4px -2px #555;
transform-origin: 20px 0 0;
transform: rotateY(90deg);
-ms-transform: perspective(1500px) rotateY(55deg); /* Fix IE */
}
/* -- Animazione copertina all'hover -- */
.copertina:hover {
transform: rotateY(0deg);
}
.copertina:hover:before {
opacity: 0;
-ms-transform: translateX(0px) scaleY(1); /* Fix IE */
}
.copertina:hover>img { /* Fix IE */
-ms-transform: rotateY(0deg);
}
/* Colori copertina (applicabili aggiungendo una delle seguenti classi sull'elemento .copertina) */
.rosso.copertina, .rosso.copertina>img { background: #f43; } /* .rosso */
.arancio.copertina,.arancio.copertina>img { background: #f70; } /* .arancio */
.giallo.copertina, .giallo.copertina>img { background: #fd0; } /* .giallo */
.verde.copertina, .verde.copertina>img { background: #4f4; } /* .verde */
.blu.copertina, .blu.copertina>img { background: #45e; } /* .blu */
.viola.copertina, .viola.copertina>img { background: #a5f; } /* .viola */
.copertina, .copertina>img { background: #def; } /* nessuna classe (default) */
</style>
</head>
<body>
<h1>Scheda libro con immagine copertina 3D (CSS3)</h1>
<small>
Semplice box per presentare l'anteprima di libri con un'elegante copertina 3D animata e possibilità di definirne il colore.
<br>Funziona in browsers che supportano le trasformazioni CSS 3D.
</small>
<div class="scheda-opera">
<h2 class="titolo-opera">HTML, XHTML & CSS per Negati
<span>Ed Tittel, Jeff Noble</span>
</h2>
<div class="copertina">
<img src="http://static.lafeltrinelli.it/static/frontside/xxl/979/3687979_241165.jpg" alt="HTML, XHTML & CSS per Negati" >
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</p>
</div>
<div class="scheda-opera">
<h2 class="titolo-opera">Responsive Web Design
<span>Ethan Marcotte</span>
</h2>
<div class="copertina giallo">
<img src="http://craigmod.com/images/journal/coccyx/aba-04.png" alt="Responsive Web Design" >
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="scheda-opera">
<h2 class="titolo-opera">Head First HTML and CSS
<span>Eric Freeman, Elisabeth Freeman</span>
</h2>
<div class="copertina blu">
<img src="http://ecx.images-amazon.com/images/P/0596159900.01._SX450_SY635_SCLZZZZZZZ_.jpg" alt="Head First HTML and CSS" >
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="scheda-opera">
<h2 class="titolo-opera">Foundations of Web Design
<span>Thomas Michaud</span>
</h2>
<div class="copertina rosso">
<img src="http://www.foundationsofwebdesign.com/wp-content/uploads/2014/08/FOWD_cover-820x510.jpg" alt="Foundations of Web Design" >
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Testato su: