Card Design and Transformation using Perspective css

Card/Photo card design and hover transformation effects using Transformation and Perspective css property.

 Techmates   27 Jan, 2020  5 mins read   143


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

Let's start with the HTML.

First we will draft the HTML structure.

 HTML

 <!-- 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 will use background instead of image 

CSS

 /* 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

- Include jQuery (https://jquery.com/download/)

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

This card can be used in as a Product cards, Shopping cart cards, Features/Services cards etc...

You can fully customize the design/animations and effects according your need.

Hope you guys liked the snippet!


Other Resources/3rd Party Libraries

  • - Pixels Wallpapers https://www.pexels.com/
  • - jQuery https://jquery.com/
  • - Google fonts (Montserrat)