body{margin:0;width:100vw;height:100vh;width:100%;display:flex;place-items:center}#example_3{margin:0 auto}.counter{display:flex;height:1lh;font-size:5rem;box-shadow:0 24px 38px 3px #0000003d,0 9px 46px 8px #0000006b,0 11px 15px -7px #0006;border:2px solid #222}.counter__segment{--diameter: 2lh;--speed: 1;position:relative;width:2ch;height:1lh;display:flex;flex-direction:column;background:linear-gradient(0deg,#191919,#323232,#0a0a0a);overflow:hidden;border-right:1px solid #444}.counter__segment:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,#fff0,#fff0 45%,#fff 65%,#fff);opacity:.15}.counter__segment+.counter__segment{border-left:1px solid #111}.counter__segment:last-child{border-right:none}.counter__segment-number{--unit: calc(360 / var(--count));--initialAngle: calc(var(--unit) * var(--i));--currAngle: calc((var(--angle, 0) + var(--initialAngle)));--currAngleDeg: calc(var(--currAngle) * 1deg);--yPos: calc(sin(var(--currAngleDeg)) * (var(--diameter) / 2 + 32px));--isVisible: clamp(0, calc((cos(var(--currAngleDeg)) - .6)*1000) , 1);position:absolute;top:0;right:0;bottom:0;left:0;transform:rotateX(var(--currAngleDeg)) translate3d(0,var(--yPos),0);backface-visibility:hidden;animation:circle calc(1s * var(--speed)) linear infinite;transform-style:preserve-3d;text-align:center;opacity:calc(cos(var(--currAngleDeg)) * var(--isVisible))}@property --angle{syntax: "<number>"; initial-value: 0; inherits: false;}@keyframes circle{0%{--angle: 0}to{--angle: -360}}.debug .counter{border:0;box-shadow:none}.debug .counter__segment{overflow:visible;transform:rotateY(45deg);transform-style:preserve-3d;background:none;border:0}.debug .counter__segment:after{background:none}.debug .counter__segment+.counter__segment{border:0}.debug .counter__segment:last-child{border:0}.debug .counter__segment-number{opacity:1;background:none}