3D Flip Counter
3D Flip Counter
Old Counter

when we think about the counter, we imagine a picture of an old-looking counter which has a click button to increase numbers and after 999 it resets to 0 and starts again, but we are not going to talk about that we will talk about 21st century counter which can be implemented to web projects, which has great animation, flipping number effect.

So guys, Today we will create a flipping counter using HTML & CSS. Hope it will be fun!
In the flipping counter, we will create two flipping pages, the page will flip down, it will have a smooth animation effect.

We will also discuss some important properties. At the end of the Blog, we had explained some important CSS properties like z-index, transform, etc.

Table of Contents

3D Flip Counter using CSS

For Creating Flip Counter we need to create two files called index.html and style.css

index.html

<!DOCTYPE html>
<head>
	<title>3D Flip Counter</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <div class="nums nums-ten">
    <div class="num" data-num="0" data-num-next="1"></div>
    <div class="num" data-num="1" data-num-next="2"></div>
    <div class="num" data-num="2" data-num-next="3"></div>
    <div class="num" data-num="3" data-num-next="4"></div>
    <div class="num" data-num="4" data-num-next="5"></div>
    <div class="num" data-num="5" data-num-next="6"></div>
    <div class="num" data-num="6" data-num-next="7"></div>
    <div class="num" data-num="7" data-num-next="8"></div>
    <div class="num" data-num="8" data-num-next="9"></div>
    <div class="num" data-num="9" data-num-next="0"></div>
  </div>
  <div class="nums nums-one">
    <div class="num" data-num="0" data-num-next="1"></div>
    <div class="num" data-num="1" data-num-next="2"></div>
    <div class="num" data-num="2" data-num-next="3"></div>
    <div class="num" data-num="3" data-num-next="4"></div>
    <div class="num" data-num="4" data-num-next="5"></div>
    <div class="num" data-num="5" data-num-next="6"></div>
    <div class="num" data-num="6" data-num-next="7"></div>
    <div class="num" data-num="7" data-num-next="8"></div>
    <div class="num" data-num="8" data-num-next="9"></div>
    <div class="num" data-num="9" data-num-next="0"></div>
  </div>
</div>

</body>
</html>

Here We are not using any javascript code to increase number we will use only css.

style.css

html {
  height: 100%;
}

:root{
    --firstBg: #DA22FF;
    --secondBg : #9733EE;
    --backgroundBg: #343334;
}
body {
  background: var(--backgroundBg);
  font-family: "Anton", sans-serif;
  height: 100%;
}

.container {
  height: 200px;
  position: relative;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

.nums {
  box-shadow: 0 3px 10px #111;
  border-top: 1px solid #393939;
  display: inline-block;
  height: 200px;
  margin: 0 20px;
  perspective: 1000px;
  position: relative;
  width: 140px;
}

.nums:before {
  border-bottom: 2px solid black;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: translate3d(0, -1px, 0);
  top: 50%;
  width: 100%;
  z-index: 1000;
}

.nums:after {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: var(--secondBg);
  border-bottom: 1px solid #444444;
  border-top: 1px solid black;
  border-radius: 0 0 5px 5px;
  bottom: 0;
  box-shadow: inset 0 15px 50px #202020;
  color: #eeeeee;
  content: "0";
  display: block;
  font-size: 145px;
  height: calc(50% - 1px);
  left: 0;
  line-height: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 2px #333;
  width: 100%;
  z-index: 0;
}

.num {
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  border-radius: 5px;
  font-size: 145px;
  height: 100%;
  left: 0;
  position: absolute;
  transform: rotateX(0);
  transition: 0.6s;
  transform-style: preserve-3d;
  top: 0;
  width: 100%;
}

.num:before,
.num:after {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  color: #eeeeee;
  display: block;
  height: 50%;
  left: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-shadow: 0 1px 2px #333;
  width: 100%;
}

.num:before {
  background: var(--firstBg);
  border-radius: 5px 5px 0 0;
  box-shadow: inset 0 15px 50px #111111;
  content: attr(data-num);
  line-height: 1.38;
  top: 0;
  z-index: 1;
}

.num:after {
  background: var(--secondBg);
  border-bottom: 1px solid #444444;
  border-radius: 0 0 5px 5px;
  box-shadow: inset 0 15px 50px #202020;
  content: attr(data-num-next);
  height: calc(50% - 1px);
  line-height: 0;
  top: 0;
  transform: rotateX(180deg);
}

.nums-one .num:nth-of-type(1) {
  -webkit-animation-name: num-one;
          animation-name: num-one;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  z-index: 10;
}

.nums-ten .num:nth-of-type(1) {
  -webkit-animation-name: num-ten;
          animation-name: num-ten;
  -webkit-animation-delay: 9s;
          animation-delay: 9s;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
  z-index: 10;
}

.nums-one .num:nth-of-type(2) {
  -webkit-animation-name: num-one;
          animation-name: num-one;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  z-index: 9;
}

.nums-ten .num:nth-of-type(2) {
  -webkit-animation-name: num-ten;
          animation-name: num-ten;
  -webkit-animation-delay: 19s;
          animation-delay: 19s;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
  z-index: 9;
}

.nums-one .num:nth-of-type(3) {
  -webkit-animation-name: num-one;
          animation-name: num-one;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  z-index: 8;
}

.nums-ten .num:nth-of-type(3) {
  -webkit-animation-name: num-ten;
          animation-name: num-ten;
  -webkit-animation-delay: 29s;
          animation-delay: 29s;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
  z-index: 8;
}

.nums-one .num:nth-of-type(4) {
  -webkit-animation-name: num-one;
          animation-name: num-one;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  z-index: 7;
}

.nums-ten .num:nth-of-type(4) {
  -webkit-animation-name: num-ten;
          animation-name: num-ten;
  -webkit-animation-delay: 39s;
          animation-delay: 39s;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
  z-index: 7;
}

.nums-one .num:nth-of-type(5) {
  -webkit-animation-name: num-one;
          animation-name: num-one;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  z-index: 6;
}

.nums-ten .num:nth-of-type(5) {
  -webkit-animation-name: num-ten;
          animation-name: num-ten;
  -webkit-animation-delay: 49s;
          animation-delay: 49s;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
  z-index: 6;
}

.nums-one .num:nth-of-type(6) {
  -webkit-animation-name: num-one;
          animation-name: num-one;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  z-index: 5;
}

.nums-ten .num:nth-of-type(6) {
  -webkit-animation-name: num-ten;
          animation-name: num-ten;
  -webkit-animation-delay: 59s;
          animation-delay: 59s;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
  z-index: 5;
}

.nums-one .num:nth-of-type(7) {
  -webkit-animation-name: num-one;
          animation-name: num-one;
  -webkit-animation-delay: 6s;
          animation-delay: 6s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  z-index: 4;
}

.nums-ten .num:nth-of-type(7) {
  -webkit-animation-name: num-ten;
          animation-name: num-ten;
  -webkit-animation-delay: 69s;
          animation-delay: 69s;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
  z-index: 4;
}

.nums-one .num:nth-of-type(8) {
  -webkit-animation-name: num-one;
          animation-name: num-one;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  z-index: 3;
}

.nums-ten .num:nth-of-type(8) {
  -webkit-animation-name: num-ten;
          animation-name: num-ten;
  -webkit-animation-delay: 79s;
          animation-delay: 79s;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
  z-index: 3;
}

.nums-one .num:nth-of-type(9) {
  -webkit-animation-name: num-one;
          animation-name: num-one;
  -webkit-animation-delay: 8s;
          animation-delay: 8s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  z-index: 2;
}

.nums-ten .num:nth-of-type(9) {
  -webkit-animation-name: num-ten;
          animation-name: num-ten;
  -webkit-animation-delay: 89s;
          animation-delay: 89s;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
  z-index: 2;
}

.nums-one .num:nth-of-type(10) {
  -webkit-animation-name: num-one;
          animation-name: num-one;
  -webkit-animation-delay: 9s;
          animation-delay: 9s;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  z-index: 1;
}

.nums-ten .num:nth-of-type(10) {
  -webkit-animation-name: num-ten;
          animation-name: num-ten;
  -webkit-animation-delay: 99s;
          animation-delay: 99s;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
  z-index: 1;
}

@-webkit-keyframes num-one {
  0% {
    transform: rotateX(0);
    z-index: 50;
  }
  10% {
    transform: rotateX(-180deg);
    z-index: 50;
  }
  90% {
    transform: rotateX(-180deg);
    z-index: 1;
  }
  90.0001% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}

@keyframes num-one {
  0% {
    transform: rotateX(0);
    z-index: 50;
  }
  10% {
    transform: rotateX(-180deg);
    z-index: 50;
  }
  90% {
    transform: rotateX(-180deg);
    z-index: 1;
  }
  90.0001% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}
@-webkit-keyframes num-ten {
  0% {
    transform: rotateX(0);
    z-index: 50;
  }
  1% {
    transform: rotateX(-180deg);
    z-index: 50;
  }
  90% {
    transform: rotateX(-180deg);
    z-index: 1;
  }
  90.0001% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}
@keyframes num-ten {
  0% {
    transform: rotateX(0);
    z-index: 50;
  }
  1% {
    transform: rotateX(-180deg);
    z-index: 50;
  }
  90% {
    transform: rotateX(-180deg);
    z-index: 1;
  }
  90.0001% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(0);
  }
}

What is nth-of-type() ?

The :nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name).

Some of important CSS Properties:

transform:

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. Example:
transform: rotateX(0)
transform: rotateY(30deg)

Z-index:

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
z-index: 1;
z-index: 4;

content

The content property is used with the ::before and ::after pseudo-elements, to insert generated content. In simple words, we can insert text inside an element using the content property. Example
content: “Hello world!”;

Code is also available on Github Click Here!

If you like it please do comment and share it with your friends!

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply