3D Moving Block Name: Turning Blocks Into Website Titles

After diving into the world of 3D CSS with my first project, 3D Moving Block, I was eager to take things a step further. The next challenge was to create something more personalized—my name in 3D blocks. The 3D Moving Block Name project was born out of a desire to use these blocks for creating unique and dynamic titles, a concept that seemed both fun and practical.

Project Overview

The purpose of the 3D Moving Block Name project was to expand on the skills and techniques I learned in the first 3D CSS project and apply them to a more structured design: spelling out my name, "Ashton," with 3D blocks. While this project didn’t introduce new technical techniques, it did involve a lot of planning, which became a crucial part of the process.

Approach & Execution

The planning phase for this project was more involved than the previous one. The first step was to draw out the ideal width and height for each letter in my name using square boxes. This grid served as the blueprint, allowing me to figure out how many boxes each letter would take up. Once I had the grid mapped out, I placed each letter in the right space and positioned the boxes to fit into the overall word structure.

This approach required some careful planning, as I had to keep track of how each box related to its neighbors in the word. Here’s a brief overview of the process:

1. Creating the Grid: I used a simple grid of square boxes to plan out the dimensions for each letter in my name. Each box would represent a part of the letter, and the grid ensured each letter had enough space to fit perfectly.

2. Letter Positioning: Once the grid was complete, I positioned each letter based on the number of boxes it needed. This meant considering how the blocks would look in relation to the entire word.

3. HTML & CSS Setup: After the planning, I dove into creating the necessary HTML and CSS files. Because no JavaScript was involved, the process was still labor-intensive, requiring a lot of copy-pasting to generate each box and position it accurately. I quickly changed to using JavaScript more in the later projects.

   div class="smallCube" id="blockA1"
div class="faces front" /div
div class="faces back" /div
div class="faces right" /div
div class="faces top" /div
div class="faces bottom" /div
/div

   I repeated this for each block required in creating my name. Which is 84 total block!

4. Positioning the Blocks: With the HTML in place, I used the CSS transform: translate properties as an animation to position each block in its designated spot, bringing my name to life in 3D form.

   #blockA1 {
animation: blockA1 7.5s;
animation-fill-mode: forwards;
}

@keyframes blockA1 {
0% {}
100% {transform: translateX(-3.4em) translateZ(4.5em);}
}

   Repeating this method for each block required.

Final Thoughts

The 3D Moving Block Name project was less about learning new techniques and more about the importance of detailed planning. Drawing out each letter and positioning the blocks within the grid was key to ensuring everything fit together seamlessly. While the project didn’t involve JavaScript, the amount of manual work and attention to detail made it a valuable exercise in understanding how CSS can be used to create dynamic designs.

As I move forward in my 3D CSS series, I’m excited to build on this foundation and start adding interactivity and more complexity to the designs. The 3D Moving Block Name was a fun and rewarding project, and it gave me a solid understanding of how to apply 3D transformations to static text. The next project in this 3D series is the 3D City Scene #1