3d flip contdown

by meo

HTML

<div>
    <strong class="nbr">
        <span class="new top">08</span>
        <span class="new bottom">08</span>
        <span class="old top">07</span>
        <span class="old bottom">07</span>
    </strong>
</div>

SCSS

div {
    width: 50px;
    -webkit-perspective-origin: 50% 50%;
    -webkit-perspective: 100;
    margin: 20px auto;
}

strong.nbr {
    -webkit-transform-style: preserve-3d;
    position: relative;
    height: 50px;
}

strong.nbr,
strong.nbr span {
    display: block;
    width: 50px;
    background: #000;
    color: #fff;
    font-size: 40px;
    text-align: center;
    border-radius: 5px;
}

strong.nbr span {
    position: absolute;
    margin: 0;
    top:0;
    left:0;
    height: 50%;
    width: 100%;
    overflow: hidden;
    line-height: 1.3em;

    -webkit-transform: rotateX(0);
    -webkit-backface-visibility: hidden;
    -webkit-transform-origin: center bottom;
    -webkit-transition: 3s;
}

strong.nbr span.top {
    //box-shadow: inset 0 1px 0px rgba(0,0,0,1), inset 0 3px 2px 0 rgba(255,255,255,.8);
}

strong.nbr span.bottom {
    line-height: 0.0001em;
    top: 50%;
    
    box-shadow: inset 0 1px 1px 0 rgba(255,255,255,.8);
}

strong.nbr span.new.bottom {
    z-index: 1;  
    -webkit-transform-origin: center top;
    -webkit-transform: rotateX(180deg);
    background: #fff;
    border-top: 1px solid #000;
}

strong.nbr span.old.bottom{
    -webkit-transition-delay: 1.5s:
}

strong.nbr span.old.bottom {
    border-top:1px solid #000;
}

div:hover {
    strong.nbr span.old.top{
        -webkit-transform: rotateX(-180deg);  
    }
    strong.nbr span.new.bottom {
        -webkit-transform: rotateX(0);
        background: #000;              
    }
    strong.nbr span.old.bottom, strong.nbr span.old.top {
        color: #000;
    }
}