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  602

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

$('[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.


Credits / Resources

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



Related Snippets