پیشنمایش زنده
کد HTML
<div class="book">
<img src="" />
<div class="cover">
<img src="" />
</div>
</div>
کد CSS
.book {
position: relative;
border-radius: 10px;
width: 300px;
height: 200px;
background-color: dark;
-webkit-box-shadow: 1px 1px 12px #000;
box-shadow: 1px 1px 12px #000;
-webkit-transform: preserve-3d;
-ms-transform: preserve-3d;
transform: preserve-3d;
-webkit-perspective: 2000px;
perspective: 2000px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #000;
padding: 10px;
}
.cover {
top: 0;
position: absolute;
background-color: black;
width: 100%;
height: 100%;
border-radius: 10px;
cursor: pointer;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform-origin: 0;
-ms-transform-origin: 0;
transform-origin: 0;
-webkit-box-shadow: 1px 1px 12px #000;
box-shadow: 1px 1px 12px #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
}
.book:hover .cover {
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: rotatey(-90deg);
-ms-transform: rotatey(-90deg);
transform: rotatey(-90deg);
}
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}