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 the transform attribute's value on hover.Change the
rotateY()
value to negative to mirror the perspective effect from left to right.
HTML
<div class="card-container">
<div class="image-card perspective-left"></div>
<div class="image-card perspective-right"></div>
</div>
CSS
.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);
}