Perspective transform on hover

CSS, Animation · May 17, 2021

Applies a perspective transform with a hover animation to an element.

  • Use transform with the perspective() and rotateY() 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.
Preview
<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);
}

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • CSS Hover Effects

    A collection of cool CSS hover effects to spice up your next web project.

    Collection · 10 snippets

  • Shifting Card

    Creates a card that shifts on hover.

    CSS, Animation · Dec 14, 2022

  • Staggered animation

    Creates a staggered animation for the elements of a list.

    CSS, Animation · Oct 11, 2021

  • Height transition

    Transitions an element's height from 0 to auto when its height is unknown.

    CSS, Animation · Dec 30, 2020