Super cool project from Bennett Feely! It makes any web type into 3D lettering with a mouseover effect that moves the 3D objects in space. It’s reminiscent of Zdog, but for type. It works its magic by stacking a bunch of copies of the glyphs on top of each other that are offset by some translateZ, then using some perspective and rotateX/rotateY on a parent element to do the interactive stuff.

The effect is extremely fun. I can’t believe Fisher-Price hasn’t already implemented it site-wide.

Accessibility-wise, I have some questions. Even in the

on the website, it turns into eight

elements, which I can’t image is super great for screen readers, not to mention the slew of elements inside. I’d think you could mitigate some of the problem with a single parent wrapper using an aria-label, yes?

Copy and paste also has weird results. If I copy, like, straight across a word, I tend to get just what I want. But if I copy from before the word to after it, I’ll get all the extra copies, which I definitely do not want. Maybe that’s fixable with some user-select: none; dancing.

It’s not just type, either! Bennet’s example on an is neat in how it makes like printing a photo on (real world) canvas and stretching it around the frame so that even the edges have color.

My favorite is how it looks on though. So cool.

CodePen Embed Fallback

Direct Link to Article — Permalink

---

The post ztext.js appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.