How to create a 3 dimensional object with CSS only
Tags: showdev, tutorial, css, codepen
Published: 2020-03-28 10:39:29

---
title: How to create a 3 dimensional object with CSS only
published: true
description: Creating 3 dimensional object with only CSS properties
tags: #showdev #tutorial #css #codepen
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vmw4k17jty2yn2zvwrjg.png
---

**To become a better web developer you have to keep challenging yourself and keep learning new stuff. Thankfully I have amazing colleagues at [Matise](https://www.matise.nl/) who are critical thinkers and always curious about new technologies, even while in self isolation. Last week I learned about the Observer api for example and I implemented it in two of our projects. This week I wanted to know how to make objects three dimensional with CSS, and in order to keep it fun I used a TARDIS as the object.**

## Transform styles and translating the Z axis
I started simpler of course; I did a little research and found that there are a couple of CSS properties you can use to create a 3d object.
{% codepen https://codepen.io/Sidstumple/pen/qBdrWPx %}

One of the most important is `transform-style`, it has a default value of `flat` but needs to be set to `preserve-3d;` in order for the cube to become a cube. otherwise the sides will just be stacked on top of each other.

The `perspective` property lets you determine how far away the object is on the Z plane by adding any length value, which sounds really trippy. Increasing the perspective amount makes the object seem farther away. [There's also a difference between the perspective property and perspective transform function](https://css-tricks.com/almanac/properties/p/perspective/), which is still a bit unclear to me to be honest.

The final property you'll need is the transform property which allows multiple transform functions like `rotateY` and `rotateX`, but also the very important `translateZ` property to assign positions on the z-axis per element.

Using rotate you can create a different perspective and see some of the top of the cube.
```scss
.cube {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-5deg) rotateY(1turn);
  // using a linear animation easing
  // to create an infinitely spinning cube
  animation: turn 12s linear infinite;
```
A cube has six sides (unless you [count the inside](https://www.youtube.com/watch?v=Cv7KS_MVpIM), hehehehe) so I had to add 6 divs which are all 10x10em. Somehow setting translateZ to half the width of the sides creates a pretty hotpink cube.
```scss
  .side {
    position: absolute;
    width: 10em;
    height: 10em;
    background: hotpink;
    &.front {
      transform: translateZ(5em);
    }
    &.top {
      transform: rotateX(90deg) translateZ(5em);
    }
    &.right {
      transform: rotateY(90deg) translateZ(5em);
    }
    &.left {
      transform: rotateY(-90deg) translateZ(5em);
    }
    &.bottom {
      transform: rotateX(-90deg) translateZ(5em);
    }
    &.back {
      transform: rotateY(-180deg) translateZ(5em);
    } 
  }
}
```

## Time and relative dimension in space
After successfully creating a cube I thought it was time for the real deal; a TARDIS. [I created a TARDIS before](https://codepen.io/Sidstumple/pen/bGdpREQ) but it had just one dimension which means it just wasn't good enough, because everyone knows a Tardis should spin.
![Who am I to argue with history says Christoffer Eccleston](https://media.giphy.com/media/n4G4h0DL8nYTm/giphy.gif)
While a TARDIS is a little more complicated than a cube the principle is the same; set `perspective: 800px;` on the parent element and `transform-style: preserve-3d;` on the container element, and add 6 sides to transform.
{% codepen https://codepen.io/Sidstumple/pen/poJeozP %}

The thing I struggled with most were things like the roof and the fact that once you've set a translateZ on a parent element the children aren't translatable on the z-axis anymore. Orrrr I was doing something wrong, please let me know if you know what.
![The Doctor thinks you can do it!](https://media.giphy.com/media/jxjrD8sG3xNSiBblxZ/giphy.gif)

#### You can do it too!
Let me know if you create any three dimensional stuff in CSS, bonus points if it's from Doctor Who. :)
![The Doctor thinks you can do it too!](https://media.giphy.com/media/mmtLWZVKLOqOs/giphy.gif)