Rotated 3D Letters and Image Hover Effect

A rotated 3D like letters hover effect combined with a tilted image for a menu.

By Manoela Ilic in Playground on
Demo Code

Some months ago, I wrote about how to achieve a hover effect for a menu where an image would appear for each item. Then we saw how to apply this in Exploring Animations for Menu Hover Effects. When I discovered the fantastic site of One up Studio I wanted to combine their cool 3D-ish menu hover effect with that previous animation, so this is a little fusion between the two.

The 3D motion is slightly different and an image is shown in an angle, creating a playful look.

I really hope you like this little experiment and find it useful. Thanks for visiting!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

3d hover menu typography

How to Create an AI-Powered Newsletter Aggregator with React and AI Agents

On-Scroll 3D Stack Motion Effect

Building a Playful Stop-Motion Crayon Cursor in p5.js

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.