:root{
–open-time: 1s;
}
selector{
padding: 50px 11px
}
selector .book::before {
content: ”;
position: absolute;
top: 6px;
left: -2px;
height: 100%;
width: 12px;
background-image: linear-gradient(to left, #eeeeee, black);
transform: skewY(-45deg);
}
selector .book::after {
content: ”;
position: absolute;
bottom: -12px;
left: 3px;
width: 93%;
height: 12px;
border-radius: 0 0 0 5px;
background-image: linear-gradient(black, #eeeeee);
transform: skew(-45deg);
border-bottom: 2px solid black;
}
@media(max-width:1024px){
selector .book::after{
width: 90%;
}
}
selector .book{
transform: perspective(2000px);
position: relative;
margin: auto;
transition: all var(–open-time);
}
selector .book-open{
transition: all var(–open-time);
transform-origin: left;
z-index: 1;
}
selector .book:hover .book-open{
transform: perspective(2000px) rotateY(-100deg);
}
selector .book>.elementor-widget-wrap{
padding: 0;
margin: 0px 10px;
background-color: #eeeeee;
box-shadow: inset 300px 0px 50px rgba(0,0,0,0.5);
transition: all var(–open-time);
}
selector .book:hover>.elementor-widget-wrap{
box-shadow: inset 20px 0px 50px rgba(0,0,0,0.5);
}
selector .book-text{
position: absolute;
left: 0;
top: 0;
}
selector .book-text .elementor-element-populated{
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
selector .book:hover{
transform: perspective(2000px) translateX(0%)translateX(10%);
}
selector .elementor-element-populated{
border-radius: 0px 10px 10px 0px;
}
selector .book, selector .book-open, selector .book-text, selector .elementor-inner-column{
max-width: 356px;
height: 420px;
border-radius: 0px 10px 10px 0px;
}
@media(max-width: 1024px){
selector .book, selector .book-open, selector .book-text, selector .elementor-inner-column{
max-width: 220px;
height: 250px;
}
}
@media(max-width: 767px){
selector .book, selector .book-open, selector .book-text, selector .elementor-inner-column{
max-width: 284px;
height: 330px;
}
selector .book{
margin: auto;
margin-bottom:50px;
}
}