CSS and HTML code to apply perspective transform with animation on mouse over (hover) element. The code utilises transform, perspective(), and rotateY(). Sourced under a permissive license.

CSS and HTML code to apply perspective transform with animation on mouse over (hover) element

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="card-container">
<div class="image-card perspective-left"></div>
<div class="image-card perspective-right"></div>
</div>
<style>
.image-card {
display: inline-block;
box-sizing: border-box;
margin: 1rem;
width: 240px;
height: 320px;
padding: 8px;
border-radius: 1rem;
background: url("https://codesnippetsandtutorials.com/wp-content/uploads/2023/07/swati-b-Vf2-ZiIu8xY-unsplash-1-840x400.jpg");
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);
}
</style>
<div class="card-container"> <div class="image-card perspective-left"></div> <div class="image-card perspective-right"></div> </div> <style> .image-card { display: inline-block; box-sizing: border-box; margin: 1rem; width: 240px; height: 320px; padding: 8px; border-radius: 1rem; background: url("https://codesnippetsandtutorials.com/wp-content/uploads/2023/07/swati-b-Vf2-ZiIu8xY-unsplash-1-840x400.jpg"); 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); } </style>
<div class="card-container">
  <div class="image-card perspective-left"></div>
  <div class="image-card perspective-right"></div>
</div>

<style>
.image-card {
  display: inline-block;
  box-sizing: border-box;
  margin: 1rem;
  width: 240px;
  height: 320px;
  padding: 8px;
  border-radius: 1rem;
  background: url("https://codesnippetsandtutorials.com/wp-content/uploads/2023/07/swati-b-Vf2-ZiIu8xY-unsplash-1-840x400.jpg");
  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);
}
</style>

Tags: CSS, HTML, CSS, CSS code snippet, html code snippet, transform, perspective(), and rotateY(), animation, css animation, css hover, css mouse over

Image: Unsplash license

CC BY 4.0 added intro and tags – 30 Seconds of Code