3D Moving Block: A Journey Into CSS 3D Transformations

As a web developer, it’s always exciting to explore new techniques and push the boundaries of what’s possible with CSS. One such project that helped me dive deep into 3D design was the 3D Moving Block. This was the first project in my ongoing series exploring 3D CSS transformations.

Project Overview

The primary goal of the 3D Moving Block project was to test out how 3D CSS worked and learn how to create interactive 3D elements using nothing more than HTML and CSS. This project was sparked by inspiration from a video I came across, featuring 3D elements on a website, and I was instantly intrigued. I knew I had to figure out how it was done.

This project was based on a tutorial by Kevin Powell from YouTube, which guided me through the process of creating a rotating 3D cube using CSS. The cube itself was created by defining six sides (or faces), each rotated and positioned at specific distances to create the illusion of a 3D object.

Approach & Execution

The project follows a fairly straightforward method, and the core steps involved setting up the "scene"—which includes the floor and the cube itself. Here is an overview of how the structure came together:

1. Setting the Scene: The scene is defined as a container that holds all the elements, which in this case, is just a floor and a cube.

   div class="hero"
div class="scene"
div class="floor" /div
div class="cube"
div class="faces front" /div
div class="faces back" /div
div class="faces left" /div
div class="faces right" /div
div class="faces top" /div
div class="faces bottom" /div
/div
/div
/div


2. Creating the Cube: The cube element consists of six faces (the sides), each of which is positioned using CSS and rotated at specific angles. This positioning and rotation helped to create the 3D effect.

.scene {
position: relative;
transform-style: preserve-3d;
}

.cube {
width: 2em;
height: 2em;
position: absolute;
top: -1em;
left: -1em;
animation: cubeRotateX 5s alternate-reverse, cubeTranslateZ 5s alternate-reverse;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: ease-in-out;
animation-composition: accumulate;
transform-style: preserve-3d;

.faces {
position: absolute;
width: 100%;
height: 100%;
background-color: var(--boxColor);
backface-visibility: inherit;
}

.front {
transform: translateZ(1em);
}

.right {
transform:
rotateY(90deg)
translateZ(1em);
}

.back {
transform:
rotateY(180deg)
translateZ(1em);
}

.left {
transform:
rotateY(270deg)
translateZ(1em);
}

.top {
transform:
translateY(-50%);
rotateX(90deg)
}

.bottom {
transform:
translateY(50%);
rotateX(90deg)
}

}

While this first attempt didn’t involve dynamic sizing or interactions, it served as an introduction to the possibilities of CSS 3D transformations. The cube was stationary, but the real magic happened when I applied the 3D transformations to position each face at a set distance from the others. This was the foundation for building more complex, dynamic 3D objects.

Final Thoughts

The 3D Moving Block project was a valuable learning experience in understanding the basics of CSS 3D transformations. Even though the boxes were not dynamic in sizing, the techniques I learned laid the groundwork for more advanced projects. In fact, this was just the beginning—my next project in the series, called the Moving Block Name, takes everything I learned here and expands on it to create more dynamic and interactive 3D elements.

This project was an excellent starting point in my exploration of 3D CSS, and I’m excited to see how it evolves as I continue to build on these foundational skills.