Perspective transform on hover
Applies a perspective transform with a hover animation to an element.
- Use
transform
with theperspective()
androtateY()
functions to create a perspective for the element. - Use a
transition
to update thetransform
attribute's value on hover. - Change the
rotateY()
value to negative to mirror the perspective effect from left to right.
<div class="card-container"> <div class="image-card perspective-left"></div> <div class="image-card perspective-right"></div> </div>
.image-card { display: inline-block; box-sizing: border-box; margin: 1rem; width: 240px; height: 320px; padding: 8px; border-radius: 1rem; background: url("https://picsum.photos/id/1049/240/320"); box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; } .perspective-left { transform: perspective(1500px) rotateY(15deg); transition: transform 1s ease 0s; } .perspective-left:hover { transform: perspective(3000px) rotateY(5deg); } .perspective-right { transform: perspective(1500px) rotateY(-15deg); transition: transform 1s ease 0s; } .perspective-right:hover { transform: perspective(3000px) rotateY(-5deg); }