Isometric card
CSS, Visual · May 17, 2021

Creates an isometric card.
- Use
transform
withrotateX()
androtateY()
as well as abox-shadow
to create an isometric card. - Use
transition
to animate the card, creating a lift effect when the user hovers over it.
<div class="isometric-card"></div>
.isometric-card {
margin: 0 auto;
transform: rotateX(51deg) rotateZ(43deg);
transform-style: preserve-3d;
background-color: #fcfcfc;
will-change: transform;
width: 240px;
height: 320px;
border-radius: 2rem;
box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01),
28px 28px 28px 0 rgba(34, 33, 81, 0.25);
transition: 0.4s ease-in-out transform, 0.3s ease-in-out box-shadow;
}
.isometric-card:hover {
transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
box-shadow: 1px 1px 0 1px #f9f9fb, -1px 0 28px 0 rgba(34, 33, 81, 0.01),
54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}
Written by Angelos Chalaris
I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.
If you want to keep in touch, follow me on GitHub.