From 887cd46270b6928563c3d40368204ce547bf9090 Mon Sep 17 00:00:00 2001
From: Chalarangelo <chalarangelo@gmail.com>
Date: Mon, 17 May 2021 13:58:04 +0300
Subject: [PATCH] Add hover perspective

---
 snippets/hover-pespective.md | 49 ++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 snippets/hover-pespective.md

diff --git a/snippets/hover-pespective.md b/snippets/hover-pespective.md
new file mode 100644
index 000000000..8d7131c9d
--- /dev/null
+++ b/snippets/hover-pespective.md
@@ -0,0 +1,49 @@
+---
+title: Perspective transform on hover
+tags: animation,intermediate
+---
+
+Applies a perspective transform with a hover animation to an element.
+
+- Use `transform` with the `perspective()` and `rotateY()` functions to create a perspective for the element.
+- Use a `transition` to update the `transform` attribute's value on hover.
+- Change the `rotateY()` value to negative to mirror the perspective effect from left to right.
+
+```html
+<div class="card-container">
+  <div class="image-card perspective-left"></div>
+  <div class="image-card perspective-right"></div>
+</div>
+```
+
+```css
+.image-card {
+  display: inline-block;
+  box-sizing: border-box;
+  margin: 1rem;
+  width: 240px;
+  height: 320px;
+  padding: 8px;
+  border-radius: 1rem;
+  background: url("https://picsum.photos/id/1049/240/320");
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+}
+
+.perspective-left {
+  transform: perspective(1500px) rotateY(15deg);
+  transition: transform 1s ease 0s;
+}
+
+.perspective-left:hover {
+  transform: perspective(3000px) rotateY(5deg);
+}
+
+.perspective-right {
+  transform: perspective(1500px) rotateY(-15deg);
+  transition: transform 1s ease 0s;
+}
+
+.perspective-right:hover {
+  transform: perspective(3000px) rotateY(-5deg);
+}
+```