Mario game Coin spin animation using HTML and CSS tutorial using VSCode

Mario is the retro game which is enjoyed by almost everyone at the childhood. Have you ever wondered how to create them using CSS and use it in our website? In this tutorial we will be looking into Mario coin with spin animation.

In this article we will see how to create Mario game Coin with spin animation using CSS.

The most important properties that we use to create the Mario Coin Spin Animation are:

The transform-origin CSS property sets the origin for an element’s transformations.

The box-shadow CSS property adds shadow effects around an element’s frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.

Mario game Code Block

Here is the CSS class for implementing it.

.coin {
  width: 5px;
  height: 5px;
  perspective: 1000;
  transform-origin: 16px;
  box-shadow: 5px 5px #ffa500, 10px 5px #ffa500, 15px 5px #ffa500,
    20px 5px #ffa500, 25px 5px #ffa500, 30px 5px #000, 0px 10px #ffa500,
    5px 10px #ffa500, 10px 10px #a52a2a, 15px 10px #a52a2a, 20px 10px #a52a2a,
    25px 10px #ffa500, 30px 10px #ffa500, 35px 10px #000, 00px 15px #ffa500,
    5px 15px #a52a2a, 10px 15px #ffa500, 15px 15px #ffa500, 20px 15px #ffa500,
    25px 15px #000, 30px 15px #ffa500, 35px 15px #000, 0px 20px #ffa500,
    5px 20px #a52a2a, 10px 20px #ffa500, 15px 20px #ffa500, 20px 20px #ffa500,
    25px 20px #000, 30px 20px #ffa500, 35px 20px #000, 0px 25px #ffa500,
    5px 25px #a52a2a, 10px 25px #ffa500, 15px 25px #ffa500, 20px 25px #ffa500,
    25px 25px #000, 30px 25px #ffa500, 35px 25px #000, 0px 30px #ffa500,
    5px 30px #a52a2a, 10px 30px #ffa500, 15px 30px #ffa500, 20px 30px #ffa500,
    25px 30px #000, 30px 30px #ffa500, 35px 30px #000, 0px 35px #ffa500,
    5px 35px #a52a2a, 10px 35px #ffa500, 15px 35px #ffa500, 20px 35px #ffa500,
    25px 35px #000, 30px 35px #ffa500, 35px 35px #000, 0px 40px #ffa500,
    5px 40px #ffa500, 10px 40px #000, 15px 40px #000, 20px 40px #000,
    25px 40px #ffa500, 30px 40px #ffa500, 35px 40px #000, 5px 45px #ffa500,
    10px 45px #ffa500, 15px 45px #ffa500, 20px 45px #ffa500, 25px 45px #ffa500,
    30px 45px #000;
}

Yay! We have created the initial Mario Coin.

Here is the output:

Mario game CSS Animation

Spin animation is by rotating the object at its center axis.

Following are the classes used for animation.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Here is the CSS animation class implementing CSS.

@keyframes flip {
        0%,
        100% {
          transform: rotateY(180deg);
        }
        50% {
          transform: rotateY(0deg);
        }
      }

The following way is to declare the CSS Class inside the class block.

.coin {
        width: 5px;
        height: 5px;
        perspective: 1000;
        transform-origin: 16px;
        box-shadow: 5px 5px #ffa500, 10px 5px #ffa500, 15px 5px #ffa500,
          20px 5px #ffa500, 25px 5px #ffa500, 30px 5px #000, 0px 10px #ffa500,
          5px 10px #ffa500, 10px 10px #a52a2a, 15px 10px #a52a2a,
          20px 10px #a52a2a, 25px 10px #ffa500, 30px 10px #ffa500,
          35px 10px #000, 00px 15px #ffa500, 5px 15px #a52a2a, 10px 15px #ffa500,
          15px 15px #ffa500, 20px 15px #ffa500, 25px 15px #000,
          30px 15px #ffa500, 35px 15px #000, 0px 20px #ffa500, 5px 20px #a52a2a,
          10px 20px #ffa500, 15px 20px #ffa500, 20px 20px #ffa500,
          25px 20px #000, 30px 20px #ffa500, 35px 20px #000, 0px 25px #ffa500,
          5px 25px #a52a2a, 10px 25px #ffa500, 15px 25px #ffa500,
          20px 25px #ffa500, 25px 25px #000, 30px 25px #ffa500, 35px 25px #000,
          0px 30px #ffa500, 5px 30px #a52a2a, 10px 30px #ffa500,
          15px 30px #ffa500, 20px 30px #ffa500, 25px 30px #000,
          30px 30px #ffa500, 35px 30px #000, 0px 35px #ffa500, 5px 35px #a52a2a,
          10px 35px #ffa500, 15px 35px #ffa500, 20px 35px #ffa500,
          25px 35px #000, 30px 35px #ffa500, 35px 35px #000, 0px 40px #ffa500,
          5px 40px #ffa500, 10px 40px #000, 15px 40px #000, 20px 40px #000,
          25px 40px #ffa500, 30px 40px #ffa500, 35px 40px #000, 5px 45px #ffa500,
          10px 45px #ffa500, 15px 45px #ffa500, 20px 45px #ffa500,
          25px 45px #ffa500, 30px 45px #000;
        animation: flip 2s linear infinite;
      }

Following is the output Mario Coin spin animation!

Here is the output:

You can find the complete coding tutorial in the following YouTube video.

YouTube video creating Mario Coin Spin using CSS

Here is the complete code of HTML and CSS for creating Mario Coin Spin Animation

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .coin {
        width: 5px;
        height: 5px;
        perspective: 1000;
        transform-origin: 16px;
        box-shadow: 5px 5px #ffa500, 10px 5px #ffa500, 15px 5px #ffa500,
          20px 5px #ffa500, 25px 5px #ffa500, 30px 5px #000, 0px 10px #ffa500,
          5px 10px #ffa500, 10px 10px #a52a2a, 15px 10px #a52a2a,
          20px 10px #a52a2a, 25px 10px #ffa500, 30px 10px #ffa500,
          35px 10px #000, 00px 15px #ffa500, 5px 15px #a52a2a, 10px 15px #ffa500,
          15px 15px #ffa500, 20px 15px #ffa500, 25px 15px #000,
          30px 15px #ffa500, 35px 15px #000, 0px 20px #ffa500, 5px 20px #a52a2a,
          10px 20px #ffa500, 15px 20px #ffa500, 20px 20px #ffa500,
          25px 20px #000, 30px 20px #ffa500, 35px 20px #000, 0px 25px #ffa500,
          5px 25px #a52a2a, 10px 25px #ffa500, 15px 25px #ffa500,
          20px 25px #ffa500, 25px 25px #000, 30px 25px #ffa500, 35px 25px #000,
          0px 30px #ffa500, 5px 30px #a52a2a, 10px 30px #ffa500,
          15px 30px #ffa500, 20px 30px #ffa500, 25px 30px #000,
          30px 30px #ffa500, 35px 30px #000, 0px 35px #ffa500, 5px 35px #a52a2a,
          10px 35px #ffa500, 15px 35px #ffa500, 20px 35px #ffa500,
          25px 35px #000, 30px 35px #ffa500, 35px 35px #000, 0px 40px #ffa500,
          5px 40px #ffa500, 10px 40px #000, 15px 40px #000, 20px 40px #000,
          25px 40px #ffa500, 30px 40px #ffa500, 35px 40px #000, 5px 45px #ffa500,
          10px 45px #ffa500, 15px 45px #ffa500, 20px 45px #ffa500,
          25px 45px #ffa500, 30px 45px #000;
        animation: flip 2s linear infinite;
      }
      @keyframes flip {
        0%,
        100% {
          transform: rotateY(180deg);
        }
        50% {
          transform: rotateY(0deg);
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Mario Coin Animation</h1>
    <div class="coin"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Mario Coin Spin Animation using CSS and HTML. Good luck and happy coding !