Isometric card
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); }