Bootstrap Snippet Card flipper with active card that sets active card as flipped using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<!-- Card 1 -->  
<div class="col-lg-4 col-md-4 col-sm-6 col-sm-12 col-xs-12">
    <div class="card-container">
        <div class="flipper">
            <div class="front">
            <div class="panel panel-primary">
                    <div class="panel-heading">Lorem Ipsum Title</div>
                    <div class="panel-body text-center"><img alt="Card Stolen, credit card with an exclamation symbol" src="http://via.placeholder.com/150x150" /></div>
                </div>
            </div>
        <div class="back">
                <div class="panel panel-primary">
                    <div class="panel-heading">Lorem Ipsum Title</div>
                    <div class="panel-body text-center">
                        <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 1</a></p>
                        <p><a class="btn btn-primary btn-lg" href="#" title="#">Action 2</a></p>
                    </div>
                </div>
            </div>
      </div>
    </div>
</div>
<!-- Card 1 -->  
<!-- Card 2 -->  
<div class="col-lg-4 col-md-4 col-sm-6 col-sm-12 col-xs-12">
    <div class="card-container">
        <div class="flipper">
            <div class="front">
            <div class="panel panel-primary">
                    <div class="panel-heading">Lorem Ipsum Title</div>
                    <div class="panel-body text-center"><img alt="Card Stolen, credit card with an exclamation symbol" src="http://via.placeholder.com/150x150" /></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.card-container {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  transform-style: preserve-3d;
}
.card-container.flipped .front {
  transform: rotateY(180deg);
}
.card-container.flipped .back {
  transform: rotateY(360deg);
}
.card-container, .front, .back {
  width: 100%;
  height: 250px;
}
.flipper {
  transform-style: preserve-3d;
  position: relative;
}
.front, .back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  transition: 3s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
$(document).ready(function(){ //loads script after the page is loaded
  $('.card-container').click(function(){ // When the element card-container is click it triggers the function
    $(this).toggleClass("flipped"); // Finds the element and toggles the class called flipped to let you know the card is currently flipped or active
        $('.card-container .flipped').toggle("flipper"); // If the card-container element also contains the class flipped it will toggle the flip
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Card flipper with active card that sets active card as flipped"
Bootstrap 3.3.0 Snippet by hrsman022

Related: See More

Questions / Comments:

"Card flipper with active card that sets active card as flipped" Bootstrap 3.3.0 Snippet by hrsman022

Related: See More

Questions / Comments:

"Card flipper with active card that sets active card as flipped"
Bootstrap 3.3.0 Snippet by hrsman022