HTML File: (index.html)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>CSS 3D Number Countdown Animation</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class ="countdown">
<div class="number">
<h2>01</h2>
</div>
<div class="number">
<h2>02</h2>
</div>
<div class="number">
<h2>03</h2>
</div>
<div class="number">
<h2>04</h2>
</div>
<div class="number">
<h2>05</h2>
</div>
<div class="number">
<h2>06</h2>
</div>
<div class="number">
<h2>07</h2>
</div>
<div class="number">
<h2>08</h2>
</div>
<div class="number">
<h2>09</h2>
</div>
<div class="number">
<h2>10</h2>
</div>
</div>
</body>
</html>
CSS File: (style.css)
body{
margin: 0;
padding:0;
display:flex;
justify-content: center;
min-height: 100vh;
background: radial-gradient(#93d9f9,#0c80b5);
}
.countdown{
position: relative;
width:400px;
height:400px;
transform-style: preserve-3d;
perspective: 1000px;
}
.countdown:before
{
content: '';
position: absolute;
bottom:-50px;
left: 0;
width:100%;
height: 10px;
background: #000;
border-radius: 50%;
filter: blur(20px);
animation: shadow 1s linear infinite;
}
@keyframes shadow {
0%,100%
{
transform: scale(0.5);
}
50%
{
transform: scale(1);
}
}
.countdown .number
{
position: absolute;
top:0;
left:0;
right:0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
transform: rotateY(270deg);
animation: animate 10s linear infinite;
}
.countdown .number:nth-child(1)
{
animation-delay: 0s;
}
.countdown .number:nth-child(2)
{
animation-delay: 1s;
}
.countdown .number:nth-child(3)
{
animation-delay: 2s;
}
.countdown .number:nth-child(4)
{
animation-delay: 3s;
}
.countdown .number:nth-child(5)
{
animation-delay: 4s;
}
.countdown .number:nth-child(6)
{
animation-delay: 5s;
}
.countdown .number:nth-child(7)
{
animation-delay: 6s;
}
.countdown .number:nth-child(8)
{
animation-delay: 7s;
}
.countdown .number:nth-child(9)
{
animation-delay: 8s;
}
.countdown .number:nth-child(10)
{
animation-delay: 9s;
}
@keyframes animate {
0%
{
transform: rotateY(90deg);
}
10%,100%
{
transform: rotateY(-90deg);
}
}
.countdown .number h2
{
margin:0;
padding:0;
font-size: 20em;
color: #fff;
}
Leave a Reply