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

Rotating Twisted 3D Typography with Three.js and Shaders

Hover Motion Intro Animation

Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js

The Collective

🎨✨💻 Stay informed and inspired with our daily selection of the most relevant and engaging frontend and design news.

Pure inspiration and practical insights to keep you ahead of the game.

Check out the latest news