xxxxxxxxxx1
2
<!-- Rotating card -->3
<div class="container d-flex flex-column align-items-center">4
5
<h5>6
Testing before the card7
</h5> 8
<div class="card-wrapper">9
<div id="card-1" class="card card-rotating text-center">10
11
<!-- Front Side -->12
<div class="face front">13
14
<!-- Image-->15
<div class="card-up">16
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo7.jpg" alt="Image with a photo of clouds.">17
</div>18
19
<!-- Avatar -->20
<div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle"21
alt="Sample avatar image.">22
</div>23
24
<!-- Content -->25
<div class="card-body">26
<h4 class="font-weight-bold mb-3">Marie Johnson</h4>27
<p class="font-weight-bold blue-text">Web developer</p>28
<!-- Triggering button -->29
<a class="rotate-btn" data-card="card-1"><i class="fas fa-redo-alt"></i> Click here to rotate</a>30
</div>31
</div>32
<!-- Front Side -->33
34
<!-- Back Side -->35
<div class="face back">36
<div class="card-body">37
38
<!-- Content -->39
<h4 class="font-weight-bold mb-0">About me</h4>40
<hr>41
<p>42
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel43
eius veniam maxime?44
<hr>45
<!-- Social Icons -->46
<ul class="list-inline py-2">47
<li class="list-inline-item"><a class="p-2 fa-lg fb-ic"><i class="fab fa-facebook-f"></i></a></li>48
<li class="list-inline-item"><a class="p-2 fa-lg tw-ic"><i class="fab fa-twitter"></i></a></li>49
<li class="list-inline-item"><a class="p-2 fa-lg gplus-ic"><i class="fab fa-google-plus-g"></i></a></li>50
<li class="list-inline-item"><a class="p-2 fa-lg li-ic"><i class="fab fa-linkedin-in"></i></a></li>51
</ul>52
<!-- Triggering button -->53
<a class="rotate-btn" data-card="card-1"><i class="fas fa-undo"></i> Click here to rotate back</a>54
55
</div>56
</div>57
<!-- Back Side -->58
</div>59
</div>60
<!-- Rotating card -->61
62
63
<div class="card-wrapper h100">64
<div id="card-1" class="card card-rotating text-center">65
66
<!-- Front Side -->67
<div class="face front">68
69
<!-- Image-->70
<div class="card-up">71
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo7.jpg" alt="Image with a photo of clouds.">72
</div>73
74
<!-- Avatar -->75
<div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).jpg" class="rounded-circle"76
alt="Sample avatar image.">77
</div>78
79
<!-- Content -->80
<div class="card-body">81
<h4 class="font-weight-bold mb-3">Marie Johnson</h4>82
<p class="font-weight-bold blue-text">Web developer</p>83
<!-- Triggering button -->84
<a class="rotate-btn" data-card="card-1"><i class="fas fa-redo-alt"></i> Click here to rotate</a>85
</div>86
</div>87
<!-- Front Side -->88
89
<!-- Back Side -->90
<div class="face back">91
<div class="card-body">92
93
<!-- Content -->94
<h4 class="font-weight-bold mb-0">About me</h4>95
<hr>96
<p>97
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel98
eius veniam maxime?99
<hr>100
<!-- Social Icons -->101
<ul class="list-inline py-2">102
<li class="list-inline-item"><a class="p-2 fa-lg fb-ic"><i class="fab fa-facebook-f"></i></a></li>103
<li class="list-inline-item"><a class="p-2 fa-lg tw-ic"><i class="fab fa-twitter"></i></a></li>104
<li class="list-inline-item"><a class="p-2 fa-lg gplus-ic"><i class="fab fa-google-plus-g"></i></a></li>105
<li class="list-inline-item"><a class="p-2 fa-lg li-ic"><i class="fab fa-linkedin-in"></i></a></li>106
</ul>107
<!-- Triggering button -->108
<a class="rotate-btn" data-card="card-1"><i class="fas fa-undo"></i> Click here to rotate back</a>109
110
</div>111
</div>112
<!-- Back Side -->113
</div>114
</div>115
<!-- Rotating card -->116
117
<h5>118
Testing after the card119
</h5>120
</div>121
122
123
1
1
xxxxxxxxxx1
$( document ).ready(function() {2
setCardSize()3
4
$( window ).resize(function() {5
setCardSize()6
});7
8
function setCardSize() {9
const $flippingCards = $('.card-rotating');10
$flippingCards.each(function(_, el){11
const cardWidth = $(el).find('.face.front').css('width');12
const cardHeight = $(el).find('.face.front').css('height');13
$(el).parent().css('height', cardHeight);14
$(el).parent().css('width', cardWidth);15
})16
}17
});18
19
Console errors: 0