Recently, I've been working on leveling up my CSS illustration abilities. One of the biggest areas I've found is the infinite possibility of transform properties, specifically in 3D transformations. Until very recently, I had absolutely no idea that CSS could handle 3D dimensions.
Now, the thing I was surprised to find is that while CSS can handle three dimensions, it has no support for creating three-dimensional objects. To make a cube, one has to create six two-dimensional elements (or pseudo-elements) and arrange them in 3D space as the cube's sides.
Now, I love the concept of being able to illustrate in 3D. I could do so much with that, and I know it would be a valuable skill when I'm making more in-depth projects like games. The more I can transfer the illustration to CSS, the more lightweight and adjustable it'll be. I don't want to be importing all kinds of Javascript libraries that only work in certain browsers.
But cubes won't cut it. I need to be able to do more versatile shapes. After worrying over the problem for a while, here's what I came up with: If I take an element, duplicate it a few dozen times, and then distribute their rotations evenly on a single axis (remembering to use preserve-3d
and perspective
), I end up with a 3-dimensional element. Using this method, I put together this illustration of a human:
Now, this method definitely has its limitations:
- Only works on shapes that are symmetrical
- It'll always end up with a circular shape. If I want something boxier, I can use the normal method I described earlier, with different elements as sides of a box.
- If you look at the shape from the top or the bottom, you can see the gaps between the elements
- The more elements you have, the more smooth the shape, but also the worse your page's performance.
These are definitely issues, but they can be partly fixed.
I know Issue #3 can be helped by adding more elements at the top and bottom (though not completely unless you're creating a cylinder). I originally had a sphere as the head of the person, but I ended up replacing it with a circle that rotates to always stay facing the user. This gives the illusion of a sphere, but without performance issues or revealing the fan. With some shapes, that works.
I'm not sure yet about the other issues, but I'm confident that as I continue foraying into this untapped field, I'll uncover more and more reliable methods to create a wider range of three-dimensional elements.
If you say any ways to improve my methodology or know of any examples of this kind of illustration on the web, please do let me know! I am very open to any new information I can get.
Top comments (0)