Card Design and Transformation using Perspective css

In this article, we will show you the Card/Photocard design and transform & animation, perspective animation effects on hover using CSS.

First, we will create the card shapes using the perspective and transformation property. Then we will apply hover effect. 

Let's start with the HTML.

HTML Structure

<!-- Random -->
<div class="card random">
  <div class="card__image" dd-bg="images/antler.jpg"></div>
</div>
<!-- Trapezoid -->
<div class="card trapezoid">
  <div class="card__image" dd-bg="images/dog.jpg"></div>
</div>
<!-- Pentagon -->
<div class="card pentagon">
  <div class="card__image" dd-bg="images/cat.jpg"></div>
</div>
<!-- Parallelogram -->
<div class="card parallelogram">
  <div class="card__image" dd-bg="images/redparrot.jpg"></div>
</div>

**Note: For the Card image we've set the background image using CSS instead of an image <img> tag.

CSS Style

/* Card design */
.card {
  width: 320px;
  height: 420px;
  padding: 0 30px;
  margin: 0 auto;
  margin-bottom: 30px;
  cursor: pointer;
  -webkit-transition: all .25s;
  -o-transition: all .25s;
  transition: all .25s;
  perspective: 600px;
}
/* Image */
.card .card__image {
  background-size: cover !important;
  width: 100%;
  height: 100%;
  -webkit-transition: all .25s;
     -moz-transition: all .25s;
      -ms-transition: all .25s;
       -o-transition: all .25s;
          transition: all .25s;
}
.card:hover .card__image {
  -webkit-transform: rotateX(15deg);
  -ms-transform: rotateX(15deg);
  -o-transform: rotateX(15deg);
  transform: rotateX(15deg);
}

/* Ranbdom */
.card.random .card__image {
  -webkit-clip-path: polygon(3% 8%, 100% 0%, 94% 90%, 7% 100%);
  -o-clip-path: polygon(3% 8%, 100% 0%, 94% 90%, 7% 100%);
  clip-path: polygon(3% 8%, 100% 0%, 94% 90%, 7% 100%);
  stroke: yellow;
  stroke-width: 8px;
}
.card.random:hover .card__image {
  -webkit-clip-path: polygon(16% 9%, 100% 0%, 99% 99%, 9% 90%);
  -o-clip-path: polygon(16% 9%, 100% 0%, 99% 99%, 9% 90%);
  clip-path: polygon(16% 9%, 100% 0%, 99% 99%, 9% 90%);
}

/* Trapezoid */
.card.trapezoid .card__image {
  -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  -o-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}
.card.trapezoid:hover .card__image {
  -webkit-clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
   -o-clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
   clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
}

/* Pentagon */
.card.pentagon .card__image {
  -webkit-clip-path: polygon(50% 0%, 100% 20%, 89% 100%, 10% 100%, 0 20%);
   -o-clip-path: polygon(50% 0%, 100% 20%, 89% 100%, 10% 100%, 0 20%);
   clip-path: polygon(50% 0%, 100% 20%, 89% 100%, 10% 100%, 0 20%);
}
.card.pentagon:hover .card__image {
  -webkit-clip-path: polygon(50% 0%, 95% 20%, 100% 100%, 0 100%, 5% 20%);
  -o-clip-path: polygon(50% 0%, 95% 20%, 100% 100%, 0 100%, 5% 20%);
  clip-path: polygon(50% 0%, 95% 20%, 100% 100%, 0 100%, 5% 20%);
}

/* Parallelogram */
.card.parallelogram .card__image {
  -webkit-clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
  -o-clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
  clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}
.card.parallelogram:hover .card__image {
  -webkit-clip-path: polygon(0 0, 90% 4%, 100% 96%, 10% 100%);
  -o-clip-path: polygon(0 0, 90% 4%, 100% 96%, 10% 100%);
  clip-path: polygon(0 0, 90% 4%, 100% 96%, 10% 100%);
}

Javascript

• First include jQuery (https://jquery.com/download/)

$('[dd-bg]').each(function() {
   $(this).css('background', 'url('+$(this).attr('dd-bg')+')');
});

These cards can be used as Product cards, Shopping cart cards, Features/Services cards, etc...

You can customize the design/animations and effects according to your requirements.