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

HTML

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

CSS

.perspective-wrap {
height:400px;
width:400px;
}
.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;
}
Hi...

Other Items in css
Page Views

This page has been viewed 240 times.

Search Code
Search Code by entering your search text above.
Welcome

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
You drown not by falling in the river, but by staying submerged.
Unknown