Add isometric card

snippets/isometric-card.md

@@ -0,0 +1,35 @@
+---
+title: Isometric card
+tags: visual,intermediate
+---
+
+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);
+}
+```