Card title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.
Bootstrap flipping card is a card animation that gives an element effect of flipping to the other side upon the interaction.
See two basic Bootstrap flipping card examples:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?
<!--Rotating card-->
<div class="col-md-4">
<mdb-card-rotating #cards>
<!--Front Side-->
<div class="face front tp-box_side tp-box_front">
<!-- Image-->
<div class="card-up">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid">
</div>
<!--Avatar-->
<div class="avatar">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%289%29.jpg" class="rounded-circle img-responsive">
</div>
<!--Content-->
<div class="card-body">
<h4>Jonathan Doe</h4>
<p>Web developer</p>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
<i class="fa fa-repeat"></i> Click here to rotate</a>
</div>
</div>
<!--/.Front Side-->
<!--Back Side-->
<div class="back tp-box_side tp-box_back">
<!--Content-->
<h4>About me</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat,
dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item">
<a class="icons-sm fb-ic">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icons-sm tw-ic">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icons-sm gplus-ic">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li class="list-inline-item">
<a class="icons-sm li-ic">
<i class="fa fa-linkedin"></i>
</a>
</li>
</ul>
<!--Triggering button-->
<a class="rotate-btn" data-card="card-1" (click)="cards.toggle()">
<i class="fa fa-undo"></i> Click here to rotate back</a>
</div>
<!--/.Back Side-->
</mdb-card-rotating>
</div>
<!--/.Rotating card-->
Click on the button to launch the animation.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.
<!--Rotating card-->
<div class="col-md-4">
<mdb-card-rotating #card>
<!--Front Side-->
<div class="face front card tp-box_side tp-box_front">
<!-- Image-->
<div class="card-up">
<div class="view overlay hm-white-slight waves-light" mdbWavesEffect>
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28110%29.jpg" class="img-fluid" alt="">
</div>
</div>
<!--/.Image-->
<!--Content-->
<div class="content">
<a class="rotate-btn" data-card="card-2" (click)="card.toggle()">
<i class="fa fa-share-alt"></i>
</a>
<h4>Card title</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius
veniam maxime.</p>
<a class="link-text">
<h5>Read more
<i class="fa fa-chevron-right"></i>
</h5>
</a>
</div>
<!--/.Content-->
</div>
<!--/.Front Side-->
<!--Back Side-->
<div class="face back tp-box_side tp-box_back">
<!--Title-->
<h4 class="card-title">Social shares
<i class="fa fa-close rotate-btn" (click)="card.toggle()"></i>
</h4>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item">
<a class="btn-floating btn-small btn-fb waves-light" mdbWavesEffect>
<i class="fa fa-facebook"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-small btn-tw waves-light" mdbWavesEffect>
<i class="fa fa-twitter"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-small btn-gplus waves-light" mdbWavesEffect>
<i class="fa fa-google-plus"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-small btn-li waves-light" mdbWavesEffect>
<i class="fa fa-linkedin"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-small btn-git waves-light" mdbWavesEffect>
<i class="fa fa-github"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-small btn-pin waves-light" mdbWavesEffect>
<i class="fa fa-pinterest"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-small btn-ins waves-light" mdbWavesEffect>
<i class="fa fa-instagram"> </i>
</a>
</li>
</ul>
<h5>Join our community</h5>
<hr>
<!--Social Icons-->
<ul class="list-inline">
<li class="list-inline-item">
<a class="btn btn-fb waves-light" mdbWavesEffect>
<i class="fa fa-facebook"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-tw waves-light" mdbWavesEffect>
<i class="fa fa-twitter"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-li waves-light" mdbWavesEffect>
<i class="fa fa-linkedin"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-ins waves-light" mdbWavesEffect>
<i class="fa fa-instagram"> </i>
</a>
</li>
</ul>
</div>
<!--/.Back Side-->
</mdb-card-rotating>
</div>
<!--/.Rotating card-->