css using perspective for transforms

just playing around with the perspective and transforms, it does weird and annoying things to the margins. I was interested in how this page worked, so i thought i would try and deconstruct it a bit. I also added the hover over effect. would be interesting to see how this would fit into a 3 col layout as it requires quite a bit of additional margin and padding to achieve the effect. https://hybridshivam.tech/pokedex/pokemon/1

This is the original image ^

And this is the animated version


<div class='perspective-wrap'>
<div class='perspective'>
<div class='perspective-inner'>
<div class='demo-box'>


.perspective-wrap {
.demo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    margin-left: 21%;
    margin-top: 80px;
    background: #444;
    border-radius: 3px;
    height: 300px;
    width: 300px;
    box-shadow: 0px 5px 15px #464646;
.perspective-inner {
opacity: 1;
transition: opacity .6s ease-in-out;
transition: .3s;
transform: rotateY(30deg);
.perspective:hover .perspective-inner {
transform: rotateY(0deg);
.perspective {
  perspective: 200px;
  margin: auto 0;
  width: 400px;

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
Page Views

This page has been viewed 683 times.

Search Code
Search Code by entering your search text above.

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.


Random Quote
There is a qualitative and quantitative difference between a day that begins with a little exercise, a book, meditation, a good meal, a thoughtful walk, and the start of a day that begins with a smartphone in bed.