Perspective Card Design and Hover Transition

Perspective card design and hover animation/transition using pure CSS

 Techmates   30 Mar, 2020  5 mins read   134


In this demo, we will share with you the perspective card design and hover animation. The snippet is crafted with CSS only. 

Html Structure

<!-- Horizontal Perspective -->
<div class="card hn">
  <div class="card-content">
    <i class="mdi mdi-airballoon"></i>
    <div class="clearfix"></div>
    Lorem ipsum dolor sit, amet consectetur adipisicing ducimus cupiditate odio unde nam.
  </div>
</div>
<div class="card hp">
  <div class="card-content">
    <i class="mdi mdi-airballoon"></i>
    <div class="clearfix"></div>
    Lorem ipsum dolor sit, amet consectetur adipisicing ducimus cupiditate odio unde nam.
  </div>
</div>

<!-- Vertical Perspective -->
<div class="card hn">
  <div class="card-content">
    <i class="mdi mdi-airballoon"></i>
    <div class="clearfix"></div>
    Lorem ipsum dolor sit, amet consectetur adipisicing ducimus cupiditate odio unde nam.
  </div>
</div>
<div class="card hn">
  <div class="card-content">
    <i class="mdi mdi-airballoon"></i>
    <div class="clearfix"></div>
    Lorem ipsum dolor sit, amet consectetur adipisicing ducimus cupiditate odio unde nam.
  </div>
</div>



CSS


/* Card */
.card {
  width: 100%;
  max-width: 275px;
  margin: 0 auto;
  height: 300px;
  display: flex;
  background-color: rgb(20, 19, 19);
  color: aliceblue;
  align-items: center;
  text-align: center;
  transition: all .25s;
  font-family: 'Nunito', sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
}
/* 
hp = horizontal positive
hn = horizontal negative
vp = vertical positive
vn = vertical negative
*/
/* Perspective Horizontal */
.card.hp {
  transform: perspective(600px) rotateY(30deg);
}
.card.hn {
  transform: perspective(600px) rotateY(-30deg);
}
/* Perspective Vertical */
.card.vp {
  transform: perspective(600px) rotateX(30deg);
}
.card.vn {
  transform: perspective(600px) rotateX(-30deg);
}
/* Card hover animation */
.card:hover {
  background-color: rosybrown;
  transform: perspective(0px) rotateY(0deg);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
}
.card-content {
  padding: 15px;
}
.card-content i {
  font-size: 3rem;
} 

I hope that demo helps you to build the creative web component for your theme/template.


Credits / Resources

  • Material Design Icons(mdi): https://materialdesignicons.com/
  • Google fonts(Nunito): https://fonts.google.com/



Related Snippets