DEV Community

Benjamin Hollon
Benjamin Hollon

Posted on

Pure CSS 3D Human

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:

  1. Only works on shapes that are symmetrical
  2. 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.
  3. If you look at the shape from the top or the bottom, you can see the gaps between the elements
  4. 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)