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
}