/* number-ring style*/
.triple-rings {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 20px auto;
}

.ring {
    position: absolute;
    width: 100%;
    height: 100%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    top: 0;
    left: 0;
}

.year-item {
    position: absolute;
    width: 40px;
    height: 40px;
    left: calc(50% - 20px);
    top: calc(50% - 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    transform-origin: center center;
    font-weight: bold;
}

/* large-ring style*/
.large-ring {
    animation: clockwise-rotate 45s infinite;
}
.large-ring .year-item:nth-child(1) { transform: rotate(30deg)  translate(130px) rotate(-30deg); }
.large-ring .year-item:nth-child(2) { transform: rotate(60deg)  translate(130px) rotate(-60deg); }
.large-ring .year-item:nth-child(3) { transform: rotate(90deg)  translate(130px) rotate(-90deg); }
.large-ring .year-item:nth-child(4) { transform: rotate(120deg) translate(130px) rotate(-120deg); }
.large-ring .year-item:nth-child(5) { transform: rotate(150deg) translate(130px) rotate(-150deg); }
.large-ring .year-item:nth-child(6) { transform: rotate(180deg) translate(130px) rotate(-180deg); }
.large-ring .year-item:nth-child(7) { transform: rotate(210deg) translate(130px) rotate(-210deg); }
.large-ring .year-item:nth-child(8) { transform: rotate(240deg) translate(130px) rotate(-240deg); }
.large-ring .year-item:nth-child(9) { transform: rotate(270deg) translate(130px) rotate(-270deg); }
.large-ring .year-item:nth-child(10) { transform: rotate(300deg) translate(130px) rotate(-300deg); }
.large-ring .year-item:nth-child(11) { transform: rotate(330deg) translate(130px) rotate(-330deg); }
.large-ring .year-item:nth-child(12) { transform: rotate(360deg) translate(130px) rotate(-360deg); }

/* medium-ring style*/
.medium-ring {
    animation: counter-clockwise-rotate 40s infinite;
}
.medium-ring .year-item:nth-child(1) { transform: rotate(30deg)  translate(90px) rotate(-30deg); }
.medium-ring .year-item:nth-child(2) { transform: rotate(60deg)  translate(90px) rotate(-60deg); }
.medium-ring .year-item:nth-child(3) { transform: rotate(90deg)  translate(90px) rotate(-90deg); }
.medium-ring .year-item:nth-child(4) { transform: rotate(120deg) translate(90px) rotate(-120deg); }
.medium-ring .year-item:nth-child(5) { transform: rotate(150deg) translate(90px) rotate(-150deg); }
.medium-ring .year-item:nth-child(6) { transform: rotate(180deg) translate(90px) rotate(-180deg); }
.medium-ring .year-item:nth-child(7) { transform: rotate(210deg) translate(90px) rotate(-210deg); }
.medium-ring .year-item:nth-child(8) { transform: rotate(240deg) translate(90px) rotate(-240deg); }
.medium-ring .year-item:nth-child(9) { transform: rotate(270deg) translate(90px) rotate(-270deg); }
.medium-ring .year-item:nth-child(10) { transform: rotate(300deg) translate(90px) rotate(-300deg); }
.medium-ring .year-item:nth-child(11) { transform: rotate(330deg) translate(90px) rotate(-330deg); }
.medium-ring .year-item:nth-child(12) { transform: rotate(360deg) translate(90px) rotate(-360deg); }

/* small-ring style*/
.small-ring {
    animation: clockwise-rotate 30s infinite;
}
.small-ring .year-item:nth-child(1) { transform: rotate(12deg)  translate(53px) rotate(-12deg); }
.small-ring .year-item:nth-child(2) { transform: rotate(24deg)  translate(53px) rotate(-24deg); }
.small-ring .year-item:nth-child(3) { transform: rotate(36deg)  translate(53px) rotate(-36deg); }
.small-ring .year-item:nth-child(4) { transform: rotate(48deg) translate(53px) rotate(-48deg); }
.small-ring .year-item:nth-child(5) { transform: rotate(60deg) translate(53px) rotate(-60deg); }
.small-ring .year-item:nth-child(6) { transform: rotate(72deg) translate(53px) rotate(-72deg); }
.small-ring .year-item:nth-child(7) { transform: rotate(84deg) translate(53px) rotate(-84deg); }
.small-ring .year-item:nth-child(8) { transform: rotate(96deg) translate(53px) rotate(-96deg); }
.small-ring .year-item:nth-child(9) { transform: rotate(108deg) translate(53px) rotate(-108deg); }
.small-ring .year-item:nth-child(10) { transform: rotate(120deg) translate(53px) rotate(-120deg); }
.small-ring .year-item:nth-child(11) { transform: rotate(132deg) translate(53px) rotate(-132deg); }
.small-ring .year-item:nth-child(12) { transform: rotate(144deg) translate(53px) rotate(-144deg); }
.small-ring .year-item:nth-child(13) { transform: rotate(156deg)  translate(53px) rotate(-156deg); }
.small-ring .year-item:nth-child(14) { transform: rotate(168deg)  translate(53px) rotate(-168deg); }
.small-ring .year-item:nth-child(15) { transform: rotate(180deg)  translate(53px) rotate(-180deg); }
.small-ring .year-item:nth-child(16) { transform: rotate(192deg) translate(53px) rotate(-192deg); }
.small-ring .year-item:nth-child(17) { transform: rotate(204deg) translate(53px) rotate(-204deg); }
.small-ring .year-item:nth-child(18) { transform: rotate(216deg) translate(53px) rotate(-216deg); }
.small-ring .year-item:nth-child(19) { transform: rotate(228deg) translate(53px) rotate(-228deg); }
.small-ring .year-item:nth-child(20) { transform: rotate(240deg) translate(53px) rotate(-240deg); }
.small-ring .year-item:nth-child(21) { transform: rotate(252deg) translate(53px) rotate(-252deg); }
.small-ring .year-item:nth-child(22) { transform: rotate(264deg) translate(53px) rotate(-264deg); }
.small-ring .year-item:nth-child(23) { transform: rotate(276deg) translate(53px) rotate(-276deg); }
.small-ring .year-item:nth-child(24) { transform: rotate(288deg) translate(53px) rotate(-288deg); }
.small-ring .year-item:nth-child(25) { transform: rotate(300deg)  translate(53px) rotate(-300deg); }
.small-ring .year-item:nth-child(26) { transform: rotate(312deg)  translate(53px) rotate(-312deg); }
.small-ring .year-item:nth-child(27) { transform: rotate(324deg)  translate(53px) rotate(-324deg); }
.small-ring .year-item:nth-child(28) { transform: rotate(336deg) translate(53px) rotate(-336deg); }
.small-ring .year-item:nth-child(29) { transform: rotate(348deg) translate(53px) rotate(-348deg); }
.small-ring .year-item:nth-child(30) { transform: rotate(360deg) translate(53px) rotate(-360deg); }
@keyframes clockwise-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes counter-clockwise-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}