[FEATURE] Rotate Lift Card Hover Utility

[aparna24bce11388]

Feature Name

Rotate Lift Card Hover Utility

---

Description

Introduce a reusable Rotate Lift Card Hover Utility that gently rotates and lifts a card when hovered. The subtle rotation combined with a soft shadow enhancement creates a modern and engaging interaction for feature cards, product cards, pricing sections, portfolios, and dashboards.

---

Why is this useful for EaseMotion CSS?

This utility aligns with EaseMotion CSS's animation-first philosophy by providing a lightweight, reusable, and human-readable hover effect. Developers can create visually appealing card interactions with a single CSS class without using JavaScript.

---

HTML Snippet

<div class="rotate-lift-card">
    <h3>Hover Me</h3>
    <p>Interactive card animation.</p>
</div>

---

CSS Snippet

.rotate-lift-card {
  width: 280px;
  padding: 24px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.rotate-lift-card:hover {
  transform: translateY(-8px) rotate(-3deg);
  box-shadow: 0 16px 32px rgba(0,0,0,0.18);
}

---

Visual Reference (optional)

Similar to the subtle hover interactions used in modern portfolio websites, SaaS landing pages, and product showcase cards.

---

Checklist

• This feature does not duplicate an existing EaseMotion CSS class
• I understand my naming will be standardized by the maintainer
• I will submit code inside submissions/ only — not in core/ or components/

[github-actions]

Hey @aparna24bce11388! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside the submissions/ directory (e.g., submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/)
• Include demo.html · style.css · README.md in your folder
• Max 25 active issues per contributor — unassign others before taking new ones
• Join our official Discord Server (Optional - for general developer chat and support; official issues belong on GitHub!)

🕑 Inactivity rule: Issues with no progress for 24 hours (1 day) will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡

[Kanneboinashivakumar]

/claim

[github-actions]

🎉 Assigned! Welcome aboard, @Kanneboinashivakumar (GSSoC-26)! 🌟

⏳ Timeframe: You have 24 hours of exclusive time to complete the issue and make a Pull Request. Please submit a PR before claiming any other issue.

💡 Tip: Be sure to check out our CONTRIBUTING.md to get off to a great start.

Happy coding! 🚀✨

[github-actions]

⚠️ Stale Assignment Cleanup: @SAPTARSHI-coder, it has been more than 24 hours (1 day) since you were assigned to this issue and no open pull request referencing this issue was found. To keep the project moving, you have been unassigned.

If you are still working on this, feel free to claim it again when you are ready to open a pull request!

🔓 Status: This issue is now open and available for anyone to claim by commenting /claim. 🚀