Multiple Cubes with CSS 3D

In my previous tutorial I showed you how to make a css 3d cuboid. Now let's make a cube grid (😅Yayyy!!). HTML Creat...

8 months ago, comments: 4, votes: 1, reward: $0.00

image.png

In my previous tutorial I showed you how to make a css 3d cuboid. Now let's make a cube grid (😅Yayyy!!).

HTML

Create a new html file and add this line in the <head></head> tag:
<link <link type="text/css" rel="stylesheet" href="https://appukuttan66.github.io/3D-CSS-lib/lib.css">

Then in the <body></body> add this:

<div class="c-wrap">
<div class="c">
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
<div class="s"></div>
</div>
</div>

Make sure to add 9 divs with c class.

CSS

Okay! now let's turn them into cubes.

.c {
  --height: 80px;
  --width: 80px;
  --depth: 80px;
  --bg: #E31337; /* to change the color*/
}

Great now let's shape them into 3x3

.c-wrap {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 80px 80px 80px;
  transform: rotateX(20deg) rotateY(30deg);
  transform-style: preserve-3d;
}

That's it !!

Changing the background color on :hover

.c:hover {
  --bg: #e7e7f1;
}

Wait what can I do with this?

🤔 how about trying to make a 3d Tic-Tac-toe?

PS: If have an idea for the next tutorial please comment them.