3D Card Flip Vertical 02

3D Card Flip Vertical 02.markdown

3D Card Flip Vertical 02

A Pen by Harry74323 on CodePen.

License.

index.html

<div class="container">
    <div class="row top">
        <div class="col-md-12">
            <h1>3D Card Flip Vertical 02</h1>
        </div>
    </div>
    <div class="row content">
        <div class="col-md-12">
         
        <section class="my-container">
          <div id="card">
            <figure class="front">1</figure>
            <figure class="back">2</figure>
          </div>
        </section>
            
            
        </div>
    </div>
    <div class="row bottom">
        <div class="col-md-12">
            <button type="button" class="btn btn-default" id="start">Flip</button>
        </div>
    </div>
</div>

script.js

$('#start').click(function() {
  $('#card').toggleClass('flipped');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.top {
    border-bottom: 1px solid #dddddd;
    margin-bottom: 40px;
    padding: 40px 0px;
}

.bottom {
    border-top: 1px solid #dddddd;
    margin-top: 40px;
    padding-top: 40px;
}

.content {
    padding: 40px 0px;
}

.my-container {
    width: 260px;
    height: 200px;
    position: relative;
    margin: 0 auto 40px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

#card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -o-transform-origin: right center;
    transform-origin: right center;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#card.flipped {
    -webkit-transform: translateY( 100%) rotateX( -180deg);
    -moz-transform: translateY( 100%) rotateX( -180deg);
    -o-transform: translateY( 100%) rotateX( -180deg);
    transform: translateY( 100%) rotateX( -180deg);
}

#card figure {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 200px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#card .front {
    border: 1px solid #CCC;
    background: red;
}

#card .back {
    border: 1px solid #CCC;
    background: white;
    -webkit-transform: translateY( 100%) rotateY( -180deg);
    -moz-transform: translateY( 100%) rotateY( -180deg);
    -o-transform: translateY( 100%) rotateY( -180deg);
    transform: translateY( 100%) rotateY( -180deg);
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />