En este tutorial, te mostraremos cómo crear un impresionante efecto de mockup animado con la versión gratuita de Elementor. Para ello utilizaremos HTML y CSS.
<a
class="book-container"
href="#"
target="_blank"
rel="noreferrer noopener"
>
<div class="book">
<img decoding="async"
alt=""
src="/wp-content/uploads/2024/07/f395e5de1f174f95bfdb63d4b3978f34.jpg"
/>
</div>
</a>
.book-container {
display: flex;
align-items: center;
justify-content: center;
perspective: 500px;
}
@keyframes initAnimation {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(-45deg);
}
}
.book {
width: 250px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(-45deg);
transition: 1s ease;
animation: 1s ease 0s 1 initAnimation;
}
.book-container:hover .book,
.book-container:focus .book {
transform: rotateY(0deg);
}
.book > :first-child {
position: absolute;
top: 0;
left: 0;
background-color: red;
width: 250px;
height: 300px;
transform: translateZ(27.5px);
background-color: #384e75;
border-radius: 0 4px 4px 0;
box-shadow: 5px 5px 20px #666;
}
.book::before {
position: absolute;
content: ' ';
left: 0;
top: 4px;
width: 53px;
height: 292px;
transform: translateX(218.5px) rotateY(90deg);
background: linear-gradient(90deg,
#fff 0%,
#f9f9f9 5%,
#fff 10%,
#f9f9f9 15%,
#fff 20%,
#f9f9f9 25%,
#fff 30%,
#f9f9f9 35%,
#fff 40%,
#f9f9f9 45%,
#fff 50%,
#f9f9f9 55%,
#fff 60%,
#f9f9f9 65%,
#fff 70%,
#f9f9f9 75%,
#fff 80%,
#f9f9f9 85%,
#fff 90%,
#f9f9f9 95%,
#fff 100%
);
}
.book::after {
position: absolute;
top: 0;
left: 0;
content: ' ';
width: 250px;
height: 300px;
transform: translateZ(-27.5px);
background-color: #384e75;
border-radius: 0 4px 4px 0;
box-shadow: -10px 0 50px 10px #666;
}
