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.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/09/Screen-Shot-2020-09-18-at-2.03.32-PM.png?resize=1024%2C304&ssl=1)
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 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 <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.
Wow!!!
We can also use text-shaow to give 3d effect to the text.
This seems very “inspired” by my 3D text library for Zdog, which is called Zfont (https://jaames.github.io/zfont/). Feeling a bit miffed about that, lol