# CSS blocky people making waves

DevFeed: [CSS blocky people making waves](<https://devfeed.tech/articles/css-blocky-people-making-waves-37253.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/css-blocky-people-making-waves/>)

Author: Stanko

Published: 2022-11-10T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [Web Components](<https://devfeed.tech/topics/web-components.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [animate](<https://devfeed.tech/tags/animate.md>), [code](<https://devfeed.tech/tags/code.md>), [components](<https://devfeed.tech/tags/components.md>), [css](<https://devfeed.tech/tags/css.md>), [element](<https://devfeed.tech/tags/element.md>), [html](<https://devfeed.tech/tags/html.md>)

## AI overview

A tutorial on creating blocky people performing a stadium wave using only CSS. It explains how to build 3D boxes from HTML elements and CSS, then use Web Components templates to reduce the repeated HTML needed for each person.

## Source excerpt

It all started with the code challenge in our office. The weekly theme was waves, and I tried to think outside of the box. After dropping a few ideas, I remembered the waves people do on stadiumsAccording to Wikipedia these are known as Mexican or stadium waves. So I made waves using CSS only (code is available on CodePen): I started without a real idea on how to do it. Obviously, I needed to create some people and animate them. 3D people would be nice, but as this was a weekly code challenge, I had to keep it simple. Blocky people, similar to characters in Minecraft, seemed like a good idea. Making them using Three.js felt too obvious, as I wanted something a little bit more unconventional and fun. CSS was definitely not made for something like this, which is why I wanted to try it out. Box # Blocky people are obviously made of blocks, so I needed to build some 3D boxes in CSS. There are many tutorials on creating a 3D box in CSS, so I'll try to keep this short. We'll need six elements to use as sides of the box. Each side needs to be appropriately sized, rotated and translated into its place. <div class="box"> <div class="front"></div> <div class="back"></div> <div class="right"></div> <div class="left"></div> <div class="bottom"></div> <div class="top"></div> </div> Show HTMLHide HTML Here you can see the three steps in creating a CSS box: Size the sides appropriately Translate them into position Rotate them The box wrapper element is outlined in red and sides are outlined in blue. If you want to play with it, I created a standalone CodePen. As a bonus, here is a three-sided prism as well. WebComponents # Each box consists of seven HTML elements (a wrapper and six sides). And each person ended up being built from twelve boxes and some additional wrappers. That means that each person requires a lot of HTML to be written. To simplify things, we can use WebComponents. Web components are a pretty powerful tool, but in this case, we will only use their template capabi