Making a CSS Only Minecraft Chicken
Tags: css, webdev, showdev, ux
Published: 2022-08-15 19:49:00

There are a bunch of articles floating about on how to make cubes in CSS. There is a surprising **lack** of articles on how to make Minecraft chickens in CSS though. As such, I thought I'd spend a couple hours making a CSS only Minecraft chicken, and this guide will walk you through how I did that.

**Here is the demo**, along with the full code via CodePen:

{% codepen https://codepen.io/smpnjn/pen/mdxzLWo %} 

The cool thing about the chicken, is that you can give him a top hat. Also, if you click him, he may cluck.

**Note**: Rotation has a few bugs on mobile, so view in full screen on desktop to rotate the chicken too.

## Making a CSS Only Minecraft Chicken
When I write articles, sometimes someone will messages me to say it's **JavaScript**, not Javascript - which makes me wonder if it's actually supposed to be MineCraft. In any case, every Minecraft chicken starts with a CSS cube. Making a CSS cube is relatively straight forward. First, we start with this HTML:
```html
<div id="chicken">
    <div class="c2">
        <div class="cube head">
            <div class="front"></div>
            <div class="bottom"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</div>
```

... which is essentially just a cube with four side div's inside. The reason it's only got **four** sides rather than **six** sides here is because I like to use CSS `pseudo` elements for the other two. It's also got a parent called `.c2` here, because CSS starts doing some wacky things if you don't do this (like stacking the blocks in weird ways).

After we've done this, we can start making our cube CSS. All the sides are relatively similar in CSS styling, with the only difference being how we transform them:
```css
#chicken {
  transform: rotateX(-15deg) rotateY(20deg);
  transform-style: preserve-3d;
  position: relative;
  left: 16rem;
  top: 16rem;
  transform-origin: 6rem 6rem;
  transform-style: preserve-3d;
  transition: all 0.1s ease-out;
  cursor: pointer;
}
#chicken .c2 {
  position: absolute;
  top: 6rem;
}
.cube.head {
  width: 6rem;
  height: 8rem;
}
.cube > div, .cube:after, .cube:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  background: white;
}
.cube:before {
  transform: rotateX(-90deg);
  transform-origin: 0 0;
}
.cube:after {
  transform: translateZ(-6rem);
  transform-origin: 0 50%;
}
.cube .left {
  transform: rotateY(90deg);
  transform-origin: 0 0;
  background: #eee;
}
.cube .right {    
  transform-origin: 100% 0;
  background: #eee;
  transform: rotateY(-90deg);
}
.cube .bottom {
  transform: rotateX(90deg);
  transform-origin: 100% 100%;
}
```

I've opted to simplify the cube method here by using `transform-origin`. Some people like to use a lot of `translate` transforms, but I find `transform-origin` is the easiest and requires the least amount of repeating yourself. The only place I need to use `translate` is for the back piece, which is `.cube:after` above. 

That's because we'd need to rotate the back piece around the centerpoint of the cube, and although you can do a 3d `transform-origin`, it's just as easy to translate the back piece into place. This does bring with it one of the more annoying things about CSS cubes, which is that we will need to change the back plate translation if we change the size of the cube. Since our first `head` cube is already configured correctly, that's OK - but for other pieces we need to add in some custom lines of CSS.

You'll also notice that we use `transform-style: preserve-3d;` all over the place. This ensures that the object **remains** 3d. If you remove this, the cube won't form, and instead it'll stay on a single plain.

### Moving our cubes into place
After you've figured out one cube - the rest is easy. All of our cubes are `position: absolute`, so all you need to do is copy and paste the HTML, update the colors as you see fit, and translate them into position. This is a pretty manual process in CSS, but to be fair, it would be in any language.

To make the chicken a little more interesting, I gave him a wing animation. To do this, I made two keyframes which simply translate about a point. I then applied this to one of the cube parent classes, in this case, `.c12` and `.c13`. I added new classes to these called `flutter` and `anti-flutter` respectively - since both wings rotate differently. The animation here runs forever. 

The only thing left to do now is update the `transform-origin`, since we need to rotate the wings about a point.

```css
.flutter {
  animation: flutter 2s infinite;
  transform-origin: 0 0;
}
.flutter-anti {
  animation: flutter-anti 2s infinite;
  transform-origin: 1rem 0;
}
@keyframes flutter {
    0% {
        transform: rotateZ(0deg);
    }
    15% {
        transform: rotateZ(-35deg);
    }
    30% {
        transform: rotateZ(-15deg);
    }
    45% {
        transform: rotateZ(-70deg);
    }
    60% {
        transform: rotateZ(0deg);
    }
}
@keyframes aggressively-flutter {
    0% {
        transform: rotateZ(0deg);
    }
    15% {
        transform: rotateZ(-90deg);
    }
    30% {
        transform: rotateZ(-45deg);
    }
    45% {
        transform: rotateZ(-90deg);
    }
    60% {
        transform: rotateZ(-45deg);
    }
    75% {
        transform: rotateZ(-90deg);
    }
    90% {
        transform: rotateZ(-45deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
```

## Adding the hat and rotation buttons
CSS and HTML are weird. In other languages, there would may be specific UI elements build in to allow us to trigger CSS classes on click. In HTML, we have to use a checkbox, which is connected to a label, which triggers an animation when clicked. **The hat** is created up front, using the same cube method as before. We then make a label and checkbox above our chicken HTML:
```html
<input type="checkbox" id="rotate" name="rotate" />
<input type="checkbox" id="hat" name="hat" />
<div id="controls">
  <div><label id="rotate-label" for="rotate">Rotate</label></div>
  <div><label id="hat-label" for="hat">Hat</label></div>
</div>
<div id="chicken">
    <!-- chicken goes here -->
    <!-- ... -->
```

Now we can use **sibling selectors** to trigger animations if the checkbox is checked. What happens is:
- The `label` acts as our button. When the user clicks it, it is `for` a specific `input`. For `#hat-label`, it is `for` the `input` with the `name` **hat**.
- So when the user clicks the `label`, it checks the checkbox. That means we can use the `:checked` CSS selector to add some new CSS.

Since `.c14`, `.c15`, and `.c16` are the hat blocks, we can set them to `display: none` by default, and then to show should the `#hat` checkbox be checked:

```css
.c14, .c15, .c16 { display: none; }

#hat:checked ~ #chicken .c14, #hat:checked ~ #chicken .c15, #hat:checked ~ #chicken .c16 {
  display: block;
}
```

The final thing to do is rotate, which follows the same principle. Instead, though, we'll trigger an `animation` when the user checks the `#rotate` checkbox. We have to also use two animations here - one for unchecked, and one for checked. The reason for this is because CSS can be a little weird if we try to re-run an animation upon unchecking a checkbox:

```css
#rotate:checked ~ #chicken {
  animation: rotate 2s 1 forwards;
}
#rotate ~ #chicken {
  animation: anti-rotate 2s 1 forwards;
}

@keyframes rotate {
    0% { 
        transform: rotateX(-15deg) rotateY(20deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(380deg);
    }
}
@keyframes anti-rotate {
    0% { 
        transform: rotateX(-15deg) rotateY(380deg);
    }
    100% {
        transform: rotateX(-15deg) rotateY(20deg);
    }
}
```

And that leaves us with a very cool, MineCraft chicken.

## Conclusion
Making Minecraft chickens has never been easier with CSS. [The full code for this demo can be found here](https://codepen.io/smpnjn/pen/mdxzLWo), so you can play around with it if you want to. I hope you've enjoyed this quick intro into building 3d objects with CSS, and hopefully you can build your own stuff too.