The digital landscape is constantly evolving, with web design and development at the forefront of this transformation. Today, we’re going to explore how you can add a dash of sophistication to your web projects by creating a 3D counter animation using CSS. This technique can enhance user experience on your site, making interactions more engaging and visually appealing.
Step1: Multi-Digit Counter with HTML Elements
This code defines the structure for a multi-digit counter using HTML. It creates eight nested divs with unique IDs representing each digit position (tens of millions to ones). Each div contains child divs with numbers 0-9, representing the digit options.
<div class="holder"> <div id="tenmillions" class="reel"> <div>9</div> <div>8</div> <div>7</div> <div>6</div> <div>5</div> <div>4</div> <div>3</div> <div>2</div> <div>1</div> <div>0</div> </div> <div id="millions" class="reel"> <div>9</div> <div>8</div> <div>7</div> <div>6</div> <div>5</div> <div>4</div> <div>3</div> <div>2</div> <div>1</div> <div>0</div> </div> <div id="hundredthousands" class="reel"> <div>9</div> <div>8</div> <div>7</div> <div>6</div> <div>5</div> <div>4</div> <div>3</div> <div>2</div> <div>1</div> <div>0</div> </div> <div id="tenthousands" class="reel"> <div>9</div> <div>8</div> <div>7</div> <div>6</div> <div>5</div> <div>4</div> <div>3</div> <div>2</div> <div>1</div> <div>0</div> </div> <div id="thousands" class="reel"> <div>9</div> <div>8</div> <div>7</div> <div>6</div> <div>5</div> <div>4</div> <div>3</div> <div>2</div> <div>1</div> <div>0</div> </div> <div id="hundreds" class="reel"> <div>9</div> <div>8</div> <div>7</div> <div>6</div> <div>5</div> <div>4</div> <div>3</div> <div>2</div> <div>1</div> <div>0</div> </div> <div id="tens" class="reel"> <div>9</div> <div>8</div> <div>7</div> <div>6</div> <div>5</div> <div>4</div> <div>3</div> <div>2</div> <div>1</div> <div>0</div> </div> <div id="ones" class="reel"> <div>9</div> <div>8</div> <div>7</div> <div>6</div> <div>5</div> <div>4</div> <div>3</div> <div>2</div> <div>1</div> <div>0</div> </div> </div>
Step2: Styling With CSS
This CSS code creates a visually captivating 3D counter animation that simulates a rotating effect through sequential transformations, utilizing CSS animations and keyframes to showcase changing numbers in a stylish, futuristic manner.
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap");
body {
height: 100vh;
margin: 0;
display: grid !important;
place-items: center;
font-family: "JetBrains Mono", monospace;
text-shadow: 0 0 5px white;
perspective: 1000px;
perspective-origin: calc(50% - 0) calc(50% - 0);
background: #191919 !important;
color: white;
}
.holder {
width: 350px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
justify-content: space-between;
transform-style: preserve-3d;
animation: hold 30s infinite ease-in-out;
}
.holder:after {
content: "";
width: 600px;
height: 300px;
left: -150px;
top: -50px;
position: absolute;
background: rgba(25, 25, 25, 0.9);
filter: blur(20px);
}
.holder:before {
content: "";
width: 340px;
height: 100px;
left: 0;
top: 50px;
position: absolute;
background: black;
transform: translateY(230px) rotateX(90deg);
filter: blur(20px);
}
@keyframes hold {
0%, 100% {
transform: rotateY(-30deg) rotateX(-2deg);
}
50% {
transform: rotateY(38deg) rotateX(8deg);
}
}
.reel {
position: relative;
transform-style: preserve-3d;
}
.reel div {
position: absolute;
text-align: center;
width: 50px;
height: 100px;
font-size: 72px;
line-height: 100px;
animation: fade 10s infinite linear;
}
.reel div:nth-child(1) {
--left: 0px;
transform: translate(-50%, -50%) rotateX(0deg) translateZ(154px);
animation-delay: 0s;
}
.reel div:nth-child(2) {
--left: 50px;
transform: translate(-50%, -50%) rotateX(36deg) translateZ(154px);
animation-delay: 1s;
}
.reel div:nth-child(3) {
--left: 100px;
transform: translate(-50%, -50%) rotateX(72deg) translateZ(154px);
animation-delay: 2s;
}
.reel div:nth-child(4) {
--left: 150px;
transform: translate(-50%, -50%) rotateX(108deg) translateZ(154px);
animation-delay: 3s;
}
.reel div:nth-child(5) {
--left: 200px;
transform: translate(-50%, -50%) rotateX(144deg) translateZ(154px);
animation-delay: 4s;
}
.reel div:nth-child(6) {
--left: 250px;
transform: translate(-50%, -50%) rotateX(180deg) translateZ(154px);
animation-delay: 5s;
}
.reel div:nth-child(7) {
--left: 300px;
transform: translate(-50%, -50%) rotateX(216deg) translateZ(154px);
animation-delay: 6s;
}
.reel div:nth-child(8) {
--left: 350px;
transform: translate(-50%, -50%) rotateX(252deg) translateZ(154px);
animation-delay: 7s;
}
.reel div:nth-child(9) {
--left: 400px;
transform: translate(-50%, -50%) rotateX(288deg) translateZ(154px);
animation-delay: 8s;
}
.reel div:nth-child(10) {
--left: 450px;
transform: translate(-50%, -50%) rotateX(324deg) translateZ(154px);
animation-delay: 9s;
}
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#ones {
animation: increment-ones 10s infinite ease-in;
}
#tens {
animation: increment-tens 100s infinite ease-in;
}
#hundreds {
animation: increment-hund 1000s infinite ease-in;
}
#thousands {
animation: increment-thou 10000s infinite ease-in;
}
#tenthousands {
animation: increment-tenthou 100000s infinite ease-in;
}
#hundredthousands {
animation: increment-hunthou 1000000s infinite ease-in;
}
#millions {
animation: increment-million 10000000s infinite ease-in;
}
#tenmillions {
animation: increment-tenmillion 10000000s infinite ease-in;
}
@keyframes increment-ones {
0% {
transform: rotateX(0);
}
10% {
transform: rotateX(-36deg);
}
20% {
transform: rotateX(-72deg);
}
30% {
transform: rotateX(-108deg);
}
40% {
transform: rotateX(-144deg);
}
50% {
transform: rotateX(-180deg);
}
60% {
transform: rotateX(-216deg);
}
70% {
transform: rotateX(-252deg);
}
80% {
transform: rotateX(-288deg);
}
90% {
transform: rotateX(-324deg);
}
100% {
transform: rotateX(-360deg);
}
}
@keyframes increment-tens {
0%, 9% {
transform: rotateX(0);
}
100% {
transform: rotateX(-360deg);
}
10%, 19% {
transform: rotateX(-36deg);
}
20%, 29% {
transform: rotateX(-72deg);
}
30%, 39% {
transform: rotateX(-108deg);
}
40%, 49% {
transform: rotateX(-144deg);
}
50%, 59% {
transform: rotateX(-180deg);
}
60%, 69% {
transform: rotateX(-216deg);
}
70%, 79% {
transform: rotateX(-252deg);
}
80%, 89% {
transform: rotateX(-288deg);
}
90%, 99% {
transform: rotateX(-324deg);
}
}
@keyframes increment-hund {
0%, 9.9% {
transform: rotateX(0);
}
100% {
transform: rotateX(-360deg);
}
10%, 19.9% {
transform: rotateX(-36deg);
}
20%, 29.9% {
transform: rotateX(-72deg);
}
30%, 39.9% {
transform: rotateX(-108deg);
}
40%, 49.9% {
transform: rotateX(-144deg);
}
50%, 59.9% {
transform: rotateX(-180deg);
}
60%, 69.9% {
transform: rotateX(-216deg);
}
70%, 79.9% {
transform: rotateX(-252deg);
}
80%, 89.9% {
transform: rotateX(-288deg);
}
90%, 99.9% {
transform: rotateX(-324deg);
}
}
@keyframes increment-thou {
0%, 9.99% {
transform: rotateX(0);
}
100% {
transform: rotateX(-360deg);
}
10%, 19.99% {
transform: rotateX(-36deg);
}
20%, 29.99% {
transform: rotateX(-72deg);
}
30%, 39.99% {
transform: rotateX(-108deg);
}
40%, 49.99% {
transform: rotateX(-144deg);
}
50%, 59.99% {
transform: rotateX(-180deg);
}
60%, 69.99% {
transform: rotateX(-216deg);
}
70%, 79.99% {
transform: rotateX(-252deg);
}
80%, 89.99% {
transform: rotateX(-288deg);
}
90%, 99.99% {
transform: rotateX(-324deg);
}
}
@keyframes increment-tenthou {
0%, 9.999% {
transform: rotateX(0);
}
100% {
transform: rotateX(-360deg);
}
10%, 19.999% {
transform: rotateX(-36deg);
}
20%, 29.999% {
transform: rotateX(-72deg);
}
30%, 39.999% {
transform: rotateX(-108deg);
}
40%, 49.999% {
transform: rotateX(-144deg);
}
50%, 59.999% {
transform: rotateX(-180deg);
}
60%, 69.999% {
transform: rotateX(-216deg);
}
70%, 79.999% {
transform: rotateX(-252deg);
}
80%, 89.999% {
transform: rotateX(-288deg);
}
90%, 99.999% {
transform: rotateX(-324deg);
}
}
@keyframes increment-hunthou {
0%, 9.9999% {
transform: rotateX(0);
}
100% {
transform: rotateX(-360deg);
}
10%, 19.9999% {
transform: rotateX(-36deg);
}
20%, 29.9999% {
transform: rotateX(-72deg);
}
30%, 39.9999% {
transform: rotateX(-108deg);
}
40%, 49.9999% {
transform: rotateX(-144deg);
}
50%, 59.9999% {
transform: rotateX(-180deg);
}
60%, 69.9999% {
transform: rotateX(-216deg);
}
70%, 79.9999% {
transform: rotateX(-252deg);
}
80%, 89.9999% {
transform: rotateX(-288deg);
}
90%, 99.9999% {
transform: rotateX(-324deg);
}
}
@keyframes increment-million {
0%, 9.99999% {
transform: rotateX(0);
}
100% {
transform: rotateX(-360deg);
}
10%, 19.99999% {
transform: rotateX(-36deg);
}
20%, 29.99999% {
transform: rotateX(-72deg);
}
30%, 39.99999% {
transform: rotateX(-108deg);
}
40%, 49.99999% {
transform: rotateX(-144deg);
}
50%, 59.99999% {
transform: rotateX(-180deg);
}
60%, 69.99999% {
transform: rotateX(-216deg);
}
70%, 79.99999% {
transform: rotateX(-252deg);
}
80%, 89.99999% {
transform: rotateX(-288deg);
}
90%, 99.99999% {
transform: rotateX(-324deg);
}
}
@keyframes increment-tenmillion {
0%, 9.999999% {
transform: rotateX(0);
}
100% {
transform: rotateX(-360deg);
}
10%, 19.999999% {
transform: rotateX(-36deg);
}
20%, 29.999999% {
transform: rotateX(-72deg);
}
30%, 39.999999% {
transform: rotateX(-108deg);
}
40%, 49.999999% {
transform: rotateX(-144deg);
}
50%, 59.999999% {
transform: rotateX(-180deg);
}
60%, 69.999999% {
transform: rotateX(-216deg);
}
70%, 79.999999% {
transform: rotateX(-252deg);
}
80%, 89.999999% {
transform: rotateX(-288deg);
}
90%, 99.999999% {
transform: rotateX(-324deg);
}
}Designing a 3D Counter: CSS Animation Techniques Demo
Creating a 3D counter animation with CSS is a simple yet effective way to enhance the interactivity and visual appeal of your web projects. By following the steps outlined in this guide, you can implement this feature into your own websites, providing a more dynamic user experience.
