.book{
–open-time: 1s;
}
selector{
padding: 50px 11px
}
selector .book{
transform: perspective(2000px);
transition: all var(–open-time);
position: relative;
margin: auto;
}
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%);
}
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 !important;
}
@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: 10px 0px 10px 35px !important;
}
}