Tower of Climbing Cubes using HTML and CSS Only

Share your love

Imagine a visually stunning tower of cubes, each scaling upward as if climbing to infinity—crafted entirely with HTML and CSS! In this blog, we’ll guide you through the process of designing a dynamic “Tower of Climbing Cubes,” leveraging CSS properties like 3D transforms, animations, and perspective. Each cube will seamlessly transition and stack, creating an eye-catching visual effect that adds depth and motion to your design. This project is perfect for honing your front-end skills while exploring the artistic side of web development. Let’s start building a tower that defies the ordinary!

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen Tower of climbing cubes – Live coding session by Amit Sheen (@amit_sheen) on CodePen.

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

</body>

</html>

Paste the below code in your <body> tag.

<!--
  Live coding of this CodePen:
  
-->

<div class="scene">
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
  <div class="column">
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="box"><i></i><i></i><i></i><i></i><i></i><i></i></div>    
  </div>
</div>

CSS Code 

Create a file style.css and paste the code below.

*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  background-color: #000;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;
  overflow: hidden;
  
  * {
    transform-style: preserve-3d;
  }
}

.scene {
  position: relative;
  transform: rotateX(-30deg) rotateY(-60deg);
  font-size: 60px;
  animation: sceneRotate 60s infinite linear;
  
  @keyframes sceneRotate {
    from { transform: rotateX(-30deg) rotateY(0deg); }
    to { transform: rotateX(-30deg) rotateY(360deg); }
  }
}

$duration: 12s;

.column {
  position: absolute;
  transform: rotateY(var(--ry)) translateX(2.8em);
  
  @for $i from 0 to 12 {
    &:nth-child(#{$i + 1}) {
      --ry: #{360deg / 12 * $i};
      
      .box {
          animation:
            boxRotate#{$i} $duration var(--delay) infinite ease-in-out,
            boxTop#{$i} $duration var(--delay) infinite step-end,
            boxTranslate $duration var(--delay) infinite linear;
      }
    }
  
    $p1: random(100) / 100 * 40;
    $p2: $p1 + 4 + random(100) / 100 * 4;
    $p3: $p2 + 2 + random(100) / 100 * 2;
    $p4: $p3 + 2 + random(100) / 100 * 2;
    $p5: $p4 + 2 + random(100) / 100 * 2;
    $p6: $p5 + 2 + random(100) / 100 * 2;
    $p7: $p6 + 4 + random(100) / 100 * 4;

    @keyframes boxRotate#{$i} {
      0%, #{$p1}% { rotate: 0.25turn; }
      #{$p2}%, #{$p3}%, #{$p4}%, #{$p5}%, #{$p6}% { rotate: -0.25turn; animation-timing-function: step-end; }

      #{$p2}%, #{$p3}%, #{$p4}%, #{$p5}%, #{$p6}% { rotate: 0turn; }
      #{$p7}%, 100% { rotate: -0.5turn; }
    }

    @keyframes boxTop#{$i} {
      0%, #{$p1}% { top: 0; }
      #{$p2}% { top: -1em; }
      #{$p3}% { top: -2em; }
      #{$p4}% { top: -3em; }
      #{$p5}% { top: -4em; }
      #{$p6}% { top: -5em; }
    }
  }
}

.box {
  position: absolute;
  width: 1em; height: 1em;
  transform-origin: top left;
  
  @for $i from 0 to 6 {
    &:nth-child(#{$i + 1}) {
      --delay: #{$duration / -6 * $i};
    }
  }
  
  @keyframes boxTranslate {
    from { translate: 0 1em; }
    to { translate: 0 7em; }
  }
  
  i {
    --gap: 0.05em;
    position: absolute;
    inset: var(--gap);
    background-color: #000d;
    border: 2px dodgerblue solid;
    box-shadow: 0 0 0.5em dodgerblue inset;
    
    &:nth-child(1) { transform: translateZ(calc(0.5em - var(--gap))); }
    &:nth-child(2) { transform: rotateY(90deg) translateZ(calc(0.5em - var(--gap))); }
    &:nth-child(3) { transform: rotateY(180deg) translateZ(calc(0.5em - var(--gap))); }
    &:nth-child(4) { transform: rotateY(270deg) translateZ(calc(0.5em - var(--gap))); }
    &:nth-child(5) { transform: rotateX(270deg) translateZ(calc(0.5em - var(--gap))); }
    &:nth-child(6) { transform: rotateX(90deg) translateZ(calc(0.5em - var(--gap))); }
  }
}

Final Output

Written by: Piyush Patil

Code Credits: https://codepen.io/amit_sheen/pen/JjzGGQR

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Tags
Share your love

Related Posts