Twitter
Partagez cette démonstration : Twitter

Un livre 3D avec CSS

Dernière modification : juin 2022

Un hiver pas comme les autres

Le code :



<div class="livre">
<div class="couverture">
<img src="couverture.jpg" alt/>
</div>
<div class="livre-gauche">
<div class=titre>Un hiver pas comme les autres</div>
</div>
</div>





*,*::before,*::after{box-sizing: border-box;}	


/*livre 3D*/
.contenu-livre{
width:300px;
position:relative;
margin:40px auto;
display:flex;
-webkit-perspective:1000px;
perspective:1000px}

.livre{
box-shadow:0 5px 4px hsla(0,0%,0%,.5);
transition:.75s;
-webkit-transform:translatex(35px) rotatey(45deg);
transform:translatex(35px) rotatey(45deg);
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform-origin:125px 0;
transform-origin:125px 0}


/*couverture livre*/
.couverture{position:relative;z-index:1}

.couverture img{

outline:1px solid transparent;

max-width:100%

}

/*cote gauche*/
.livre-gauche {

position: absolute; 
bottom: 0;
top: 0;
width: 50px;
overflox:hidden;
box-shadow: 0 5px 4px hsla(0,0%,0%,.5);
background-image:url(cote-livre.jpg); 
background-repeat: no-repeat; 
background-size: auto 100%;
-webkit-transform: rotatey(-90deg) translatex(-49px);
transform: rotatey(-90deg) translatex(-49px);
-webkit-transform-origin: 0 0;
transform-origin: 0 0

}


.livre-gauche:before{

content: '';
display: block;
width: 100%;
height: 100%;
background: hsla(0,0%,0%,.2)

}/*on ajoute un effet sombre sur le cote*/ 

.livre:after{
/*correspond a la pliure du livre cote gauche*/

content: '';
position: absolute;
top: 0;
bottom: 0;
left: 3px;
width: 5px;
box-shadow: inset 0 5px 5px hsla(0,0%,0%,.5);
z-index: 2

}




/*titre livre cote gauche*/
.titre_livre {

display: block; 
width: 400px; 
text-align: left; 
color: #fff; 
position: absolute; 
top:0;
left: 35px;
text-indent: 45px;
text-transform: uppercase; 
text-shadow: 0 0 5px #000;
font-size: 1rem; 
opacity: .8; 
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);/*pour placer le titre du bouquin*/
-webkit-transform-origin: 0 0;
transform-origin: 0 0

}




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.

haut page