[Tutorial] 3D spinner

Okay so this time I thought it would be nice to make a real world use for the 3d library I made. So here it goes and I hope that you will enjoy it ...

Part One: Let's get everything ready!!

The first thing to do would be to create a new html file (or just use a code playground) and include the css library with this line in your head tag:

<link href="https://appukuttan66.github.io/3D-CSS-lib/lib.css" rel="stylesheet" type="text/css"> 

Part 2: Make a Cube.

Now let's add this to html body:

<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>

The "c" class is our cube and the "s" tags are the sides. Now that we have our cube let's set the variables.

Okay so you're probably thinking that " Wait ... Variables!!?? In CSS!!?? This guy is joking right!!?" WRONG!! CSS defines style(pun intended).

c{
  --width: 20vmin;
  --height: 20vmin;
  --depth: 20vmin;
  --bg: linear-gradient(120deg, #155799, #159957);
}
.s{
  border: none;
}

Notice the -- that's how you set variables. Right now we just set the height,width,depth and the background color. We also got rid of those ugly borders.


Awesome!! At this point we should have something like this:

Part 3: Wait!! .... Where are those animations you promised!!??

Animations coming in hot 🔥🔥!!


Just add this to class c:

  animation-name: spinMe;
  animation-duration: 4s;
  animation-iteration-count: infinite;

And this to your CSS:

@keyframes spinMe {
  100%{
    transform: rotateX(360deg) rotateY(360deg);
  }
}

There you go!! This one was pretty basic but yet fun ... Right!!?
Want to see this in action click here