\
There are a bunch of articles floating about 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 of 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:

<https://codepen.io/smpnjn/pen/mdxzLWo>

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

\
## Making a CSS-Only Minecraft Chicken

When I write articles, sometimes someone will message 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 straightforward. First, we start with this HTML:

\
```markup
<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 that 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 center point 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 that simply translate 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 to 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 maybe 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">
    
    
```

\
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 checking. 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 to building 3d objects with CSS, and hopefully, you can build your own stuff too.

\

---

Also published [here](https://fjolt.com/article/css-minecraft-chicken).

BUNCH

CodePen

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

Web Development & Ecommerce Writing Contest

A Step-By-Step Guide to Making a CSS Only Minecraft Chicken

A Step-By-Step Guide to Making a CSS Only Minecraft Chicken

Too Long; Didn't Read

Companies Mentioned

@smpnjn

RELATED STORIES