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
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
I believe that in order to better your knowledge base, it takes a lot of failing in order to succeed. I don't consider anything a failure as long as you get back up and you learn from your own mistakes.
Unknown