[Next.js] Creating a card component with 3D hover effect

UpdatedAugust 27, 2024

Student developer exploring Next.js, React, React Native & Tailwindcss. Solid in HTML & CSS. Passionate about building web/mobile apps. Always eager to learn🎯!

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

How to Show Current Session Usage in Claude Code Statusline

Introduction I developed a CLI tool called ccstatus that displays actual session usage directly in the Claude Code status line. This enhancement allows users to view their session metrics without needing to manually type "/status", providing a more s...

Jan 13, 20262 min read

How to Show Current Session Usage in Claude Code Statusline

Resolve npm install Hanging: Easy Steps to Follow

In today’s article, we will be thoroughly exploring the steps to resolve the common issue where npm install hangs or gets stuck. This problem can be quite frustrating for developers, as it interrupts the workflow and delays project progress. There ar...

Nov 26, 20244 min read

Resolve npm install Hanging: Easy Steps to Follow

Resolving [Next.js] Error: Too Many Re-Renders

How to Fix the Too Many Re-Renders Error in Next.js

Nov 11, 20244 min read

Resolving [Next.js] Error: Too Many Re-Renders

[Expo] Convert Your React Native Code to an Android APK : A Detailed Process

As the title suggests, today we will delve into the process of generating an APK file from your React Native code. This guide is designed for those who have created their projects using Expo, and we will use Expo EAS Build(Expo Application Service) t...

Oct 25, 20244 min read

[Expo] Convert Your React Native Code to an Android APK : A Detailed Process

How to Move Your YouTube Subscriptions to a New Account

In this article, I will provide a comprehensive guide on how to export your YouTube subscriptions from one account and then import them into another account of your choice. This process involves several steps to ensure that all your favorite channels...

Oct 22, 20243 min read

How to Move Your YouTube Subscriptions to a New Account

Tharusha’s Dev Log

12 posts

"use client"; import { useState, useRef } from "react"; const Card = () => { const [mousePos, setMousePos] = useState({ x: 0, y: 0 }); const cardRef = useRef(null); const handleMouseMove = (e) => { const rect = cardRef.current.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2; const y = ((e.clientY - rect.top) / rect.height - 0.5) * -2; setMousePos({ x: x * 15, y: y * 15 }); }; const handleMouseLeave = () => { setMousePos({ x: 0, y: 0 }); }; return ( <section className="cursor-pointer group perspective-100 mt-28"> <div ref={cardRef} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} style={{ transform: `rotateY(${mousePos.x}deg) rotateX(${mousePos.y}deg)`, transition: "transform 0.2s ease-out", }} > <div className="w-[600px] h-[400px] rounded-xl shadow-lg transition-transform duration-500 ease-out group-hover:scale-105 bg-white/10 backdrop-blur-lg border border-green-400 flex items-center justify-center"> <h1 className="text-white text-7xl">3D hover effect</h1> </div> </div> </section> ); }; export default Card;

import Card from "@/app/components/Card"; const Blogs = () => { return ( <section className="flex flex-col items-center"> <div> <Card /> </div> </section> ); }; export default Blogs;

[Next.js] Creating a card component with 3D hover effect

Comments

More from this blog

How to Show Current Session Usage in Claude Code Statusline

Resolve npm install Hanging: Easy Steps to Follow

Resolving [Next.js] Error: Too Many Re-Renders

[Expo] Convert Your React Native Code to an Android APK : A Detailed Process

How to Move Your YouTube Subscriptions to a New Account

Card.jsx

page.jsx

Command Palette

Comments

More from this blog

Card.jsx

page.jsx