MS Card Flip

by justjohn

HTML

<section class="digit">
    <div class="card">
        <div class="top">2T</div>
        <div class="bottom">1B</div>
    </div>
    <div class="card back active transform">
        <div class="bottom">2B</div> 
    </div>
    <div class="card front active transform">
        <div class="top">1T</div>
    </div>
</section>

SCSS

.digit {
    position: relative;
    width: 150px;
    height: 260px;
    margin: 30px;
    border: 1px solid #CCCCCC;
    
    perspective: 800px;
    -webkit-perspective: 800px;
    
    .card {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
border: 1px solid silver;    
    
        div {
            font-size: 40px;
            text-align: center;
            line-height: 130px;
        }
    
        .top {
            background: red;
            position: absolute;
            top: 0;
            height: 50%;    
            width: 100%;
        }
        .bottom {
            background: blue;
            position: absolute;
            top: 50%;
            height: 50%;    
            width: 100%;
        }
        
    }

    .transform {
        transition: transform 1.0s ease;
        -webkit-transition: -webkit-transform 1.0s ease;
    }
    
    .active {
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
    
        &.flipped {
            transform: rotateX( -180deg );
            -webkit-transform: rotateX( -180deg );
        }
        &.flipped.back {
            transform: rotateX( 0deg );
            -webkit-transform: rotateX( 0deg );
        }

        &.front {
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
    
            div {
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
            }
        }
        
        &.back {
            transform: rotateX( 180deg );
            -webkit-transform: rotateX( 180deg );
    
            .top {
                transform: rotateX( 180deg );
                -webkit-transform: rotateX( 180deg );
            }
        }
    
    }
}

JavaScript

var i = 1;
$(".digit").click(function(e) {
    var value = i++;
    var digit = this;
    
    var active_top    = $(".active .top", this),
        active_bottom = $(".active .bottom", this),
        back_top      = $(".back .top", this),
        back_bottom   = $(".back .bottom", this);
    
    $(".card", digit).addClass("transform");
    $(".card", digit).addClass("flipped");
    
    setTimeout(function() {
        // update first
       // active_top.html(i + 'T');
        //back_bottom.html(i + 'B');
        
        $(".card", digit).removeClass("transform");
        $(".card", digit).removeClass("flipped");
        
       // back_top.html((i+1) + 'T');
        //active_bottom.html((i+1) + 'B');
    }, 2500)
});