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.