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
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
<h1> on the website, it turns into eight
<h1> elements, which I can’t image is super great for screen readers, not to mention the slew of
<span> elements inside. I’d think you could mitigate some of the problem with a single parent wrapper using an
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
<img> 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
<svg> though. So cool.
You can support CSS-Tricks by being an MVP Supporter.