You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
2.3 KiB
1 lines
2.3 KiB
.M-Flipper{display:inline-block;position:relative;text-align:center;font-family:Helvetica Neue}.M-Flipper .digital:before,.M-Flipper .digital:after{content:"";position:absolute;left:0;right:0;background:var(--eab177a6);overflow:hidden;box-sizing:border-box}.M-Flipper .digital:before{top:0;bottom:50%;border-radius:10px 10px 0 0;border-bottom:solid 1px var(--676e122f)}.M-Flipper .digital:after{top:50%;bottom:0;border-radius:0 0 10px 10px;line-height:0}.M-Flipper.down .front:before{z-index:3}.M-Flipper.down .back:after{z-index:2;transform-origin:50% 0%;transform:perspective(160px) rotateX(180deg)}.M-Flipper.down .front:after,.M-Flipper.down .back:before{z-index:1}.M-Flipper.down.go .front:before{transform-origin:50% 100%;animation:frontFlipDown .6s ease-in-out both;backface-visibility:hidden}.M-Flipper.down.go .back:after{animation:backFlipDown .6s ease-in-out both}.M-Flipper.up .front:after{z-index:3}.M-Flipper.up .back:before{z-index:2;transform-origin:50% 100%;transform:perspective(160px) rotateX(-180deg)}.M-Flipper.up .front:before,.M-Flipper.up .back:after{z-index:1}.M-Flipper.up.go .front:after{transform-origin:50% 0;animation:frontFlipUp .6s ease-in-out both;backface-visibility:hidden}.M-Flipper.up.go .back:before{animation:backFlipUp .6s ease-in-out both}@keyframes frontFlipDown{0%{transform:perspective(160px) rotateX(0)}to{transform:perspective(160px) rotateX(-180deg)}}@keyframes backFlipDown{0%{transform:perspective(160px) rotateX(180deg)}to{transform:perspective(160px) rotateX(0)}}@keyframes frontFlipUp{0%{transform:perspective(160px) rotateX(0)}to{transform:perspective(160px) rotateX(180deg)}}@keyframes backFlipUp{0%{transform:perspective(160px) rotateX(-180deg)}to{transform:perspective(160px) rotateX(0)}}.M-Flipper .number0:before,.M-Flipper .number0:after{content:"0"}.M-Flipper .number1:before,.M-Flipper .number1:after{content:"1"}.M-Flipper .number2:before,.M-Flipper .number2:after{content:"2"}.M-Flipper .number3:before,.M-Flipper .number3:after{content:"3"}.M-Flipper .number4:before,.M-Flipper .number4:after{content:"4"}.M-Flipper .number5:before,.M-Flipper .number5:after{content:"5"}.M-Flipper .number6:before,.M-Flipper .number6:after{content:"6"}.M-Flipper .number7:before,.M-Flipper .number7:after{content:"7"}.M-Flipper .number8:before,.M-Flipper .number8:after{content:"8"}.M-Flipper .number9:before,.M-Flipper .number9:after{content:"9"}
|