.flipper { color: #333; display: block; font-size: 50px; line-height: 100%; padding: 0; margin: 0; height: 1.7em; } .flipper.flipper-invisible { font-size: 0px !important; } .flipper-group { position: relative; white-space: nowrap; display: block; float: left; padding: 0; margin: 0; } .flipper-group label { position: absolute; color: #fff; font-size: 20%; top: 100%; line-height: 1em; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); text-align: center; padding-top: .5em; } .flipper-digit { white-space: nowrap; position: relative; padding: 0; margin: 0; display: inline-block; float: left; height: 1.2em; overflow-y: hidden; } .flipper-digit span { font-size: 25%; } .flipper-delimiter { white-space: nowrap; display: block; float: left; padding: 0; margin: 0; color: #fff; min-width: .1em; white-space: nowrap; display: block; padding-top: 0.1em; padding-bottom: 0.1em; line-height: 1em; } .digit-face { display: block; visibility: hidden; position: relative; border-radius: 0.1em; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em; box-sizing: border-box; text-align: center; } .digit-next { display: block; position: relative; border-radius: 0.1em; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; height: 1.2em; background: #fff; padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em; box-sizing: border-box; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .digit-top { z-index: 10; top: 0; left: 0; right: 0; height: 50%; -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none; overflow: hidden; position: absolute; background: #fff; padding-top: 0.1em; padding-bottom: 0; padding-left: 0.1em; padding-right: 0.1em; border-top-left-radius: 0.1em; border-top-right-radius: 0.1em; box-sizing: border-box; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: background 0s linear, -webkit-transform 0s linear; transition: transform 0s linear, background 0s linear; transition: transform 0s linear, background 0s linear, -webkit-transform 0s linear; -webkit-transform-origin: 0 0.6em 0 !important; transform-origin: 0 0.6em 0 !important; -webkit-transform-style: preserve-3d !important; transform-style: preserve-3d !important; z-index: 20; } .digit-top.r { transition: background 0.2s linear, -webkit-transform 0.2s linear; transition: transform 0.2s linear, background 0.2s linear; transition: transform 0.2s linear, background 0.2s linear, -webkit-transform 0.2s linear; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); background: #cccccc; } .digit-top2 { visibility: hidden; position: absolute; height: 50%; left: 0; right: 0; background: #cccccc; transition: -webkit-transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; line-height: 0em !important; top: 50% !important; bottom: auto !important; padding-top: 0; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em; border-bottom-left-radius: 0.1em; border-bottom-right-radius: 0.1em; overflow: hidden; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: background 0s linear, -webkit-transform 0s linear; transition: transform 0s linear, background 0s linear; transition: transform 0s linear, background 0s linear, -webkit-transform 0s linear; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-style: preserve-3d !important; transform-style: preserve-3d !important; -webkit-transform-origin: 0 0 0 !important; transform-origin: 0 0 0 !important; z-index: 20; } .digit-top2.r { visibility: visible; transition: background 0.2s linear 0.2s, -webkit-transform 0.2s linear 0.2s; transition: transform 0.2s linear 0.2s, background 0.2s linear 0.2s; transition: transform 0.2s linear 0.2s, background 0.2s linear 0.2s, -webkit-transform 0.2s linear 0.2s; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); background: #fff; } .digit-bottom { -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none; position: absolute; overflow: hidden; background: #fff; height: 50%; left: 0; right: 0; bottom: 0; z-index: 9; line-height: 0em; padding-top: 0; padding-bottom: 0.1em; padding-left: 0.1em; padding-right: 0.1em; border-bottom-left-radius: 0.1em; border-bottom-right-radius: 0.1em; box-sizing: border-box; text-align: center; transition: none; } .digit-bottom.r { transition: background 0.2s linear; background: #cccccc; } .flipper-digit:after { content: ""; position: absolute; height: 2px; background: rgba(0, 0, 0, 0.5); top: 50%; display: block; z-index: 30; left: 0; right: 0; } .flipper-dark { color: #fff; } .flipper-dark .flipper-delimiter { color: #333; } .flipper-dark .digit-next { background: #333; } .flipper-dark .digit-top { background: #333; } .flipper-dark .digit-top.r { background: black; } .flipper-dark .digit-top2 { background: black; } .flipper-dark .digit-top2.r { background: #333; } .flipper-dark .digit-bottom { background: #333; } .flipper-dark-labels .flipper-group label { color: #333; }