Use CSS Transforms to Create Configurable 3D Cuboids

Jhey Tompkins: [0:00] Start by creating an element for a cuboid. Let's give it the className="cuboid". A cuboid means six sides, so let's create six child elements with a class="cuboid_side". To differentiate the sides, I'm going to give each a number and here are the cuboid_side within the cuboid.

[0:18] Let's start by defining some styles of the cuboid element. We can use CSS variables to define a width, a height, and a depth of a cuboid, and an equal width, height, and depth will give us a cube.

[0:33] Let's apply a background color, and let's use hsla(, %, 100%, .2). Each side will need to be absolutely positioned, so let's use position: relative on the cuboid. Let's begin styling the sides. Let's give them the same background-color: hsla(, %, 100%, .2). Let's also give them absolute positioning.

[1:00] We can use the input height selector to style each side. Let's start with the first side, the height will be the height we defined for the cuboid and the width will be the width. Then, we are ready to transform that side and we want to translate it half of the depth on the Z-axis.

[1:18] For this, we can use calc var depth * .5. Wait, we didn't see any change. To see our changes, let's rotate the cuboid. Let's rotate it on the X-axis by 24 degrees and on the Y-axis by 32 degrees.

[1:35] The first cuboid side should have moved on the Z-axis, but nothing has changed, and that is because we need to apply transform-style, preserve 3D to the cuboid. Now, we can see cuboid side actually went further back on the Z axis.

[1:49] If we time the depth by a negative, it will come forward. The second side we want to appear at the back, and the rule is almost the same. We can copy our input height selector, and change it to the second side and we can create a coefficient CSS variable that we use to calculate the distance on the Z-axis.

[2:07] If we swap that out, we should see no change, but if we change the scoped variable for the second side to .5, the second side is where we expect. If we change the depth of cuboid to 200 pixels, those sides move further out.

[2:20] Let's use the third and fourth sides as the left and right side of our cuboid. We can start with the same rule, but this time it's input type three, and for the left and right sides, the height is var height, but the width is var depth.

[2:36] To transform the left side, we want to rotate on the Y-axis by 90 degrees and then translate on the Z-axis by minus half of the width. To do this, we use count var width * -.5 and we can see our third side, the left side.

[2:54] The right side will be the same, however, it will rotate -90 degrees. We can create another scoped variable of rotation and put that into our transform. Then, we can create a rule for the fourth side that updates the rotation to -90 degrees and now we can see the fourth side is here.

[3:11] However, if we update the width sides three and four and now not in the correct place and that's because they implicitly use a left zero and top zero for their absolute positioning. To fix that, let's apply left 50 percent and top 50 percent, and before our other transforms, let's translate by -50 percent and -50 percent to center them. Now, our sides are in the correct place.

[3:33] We can now update our width and the sides fully. For sides five and six, these are the top and bottom of the cuboid and we can do a similar thing again. The height will be the depth and the width will be the width.

[3:46] We will need to apply left 50 percent and top 50 percent again and then we need to transform that side. Let's start by translating it by -50 percent and -50 percent to center and then rotating it on the X-axis by -90 degrees and then translating it on the Z-axis by half of the height.

[4:04] We can use count var height * -.5 and now the fifth side is on the top. We can use the same technique as previous and create a variable for the rotation. Let's use a default of -90 degrees and substitute that into our transform. Then, for the sixth side, we update rotation to the 90 degrees.

[4:23] There we have it, a cuboid. Let's remove the background color from the root element. Let's also remove the numbers from each side and now we can configure different widths, heights, and depths. A depth of 200 pixels, a height of 300 pixels, and a width of 400 pixels.

[4:38] We could even use a responsive unit like [inaudible] to create a cuboid that will scale with the [inaudible] . Depending on the requirement, we might also change the perspective of our scene.

[4:48] We could even add a second cuboid, and due to the way Scoped CSS variables work, we could give it a different width, a different height, and a different depth without having to repeat all those styles again.

[4:59] In review, we can use CSS transforms with the preserved 3D transform style to create 3D cuboids with CSS. If we combine our solution with Scoped CSS variables and use calc we're able to create configurable cuboids, where we can define the width, height, and depth to configure the size of our cuboids.