In this tutorial, we will show you how to create a stunning animated mockup effect with the free version of Elementor. To do this, we will use HTML and 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 301 TP3T, #f9f9f9 35%, #fff 40%, #f9f9f9 45%, #fff 50%, #f9f9f9 55%, #fff 60%, #f9f9f9 #f9f9f9 3T); } .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; }
