41 lines
1.1 KiB
Markdown
41 lines
1.1 KiB
Markdown
---
|
|
title: Isometric card
|
|
type: snippet
|
|
language: css
|
|
tags: [visual]
|
|
author: chalarangelo
|
|
cover: guitar-living-room
|
|
dateModified: 2021-05-17T14:04:52+03:00
|
|
---
|
|
|
|
Creates an isometric card.
|
|
|
|
- Use `transform` with `rotateX()` and `rotateY()` as well as a `box-shadow` to create an isometric card.
|
|
- Use `transition` to animate the card, creating a lift effect when the user hovers over it.
|
|
|
|
```html
|
|
<div class="isometric-card"></div>
|
|
```
|
|
|
|
```css
|
|
.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);
|
|
}
|
|
```
|