How to do transform with click in button - html

Question

I am trying to make a flip card work through a button, it is working normally with :hover but I cannot make it work with a button. I've tried using jquery and it didn't work can someone help me with this problem? (Im using bootstrap)
.card-flip > div {
backface-visibility: hidden;
transition: transform 300ms;
transition-timing-function: linear;
width: 100%;
height: 100%;
margin: 0;
display: flex;
}
.card-front {
transform: rotateY(0deg);
}
.card-back {
transform: rotateY(180deg);
position: absolute;
top: 0;
}
.card-flip:hover .card-front {
transform: rotateY(-180deg);
}
.card-flip:hover .card-back {
transform: rotateY(0deg);
}
.test{
background-color: green;
}
.test2{
background-color: yellow;
}
<div class="container">
<div class="card card-flip h-100 test">
<div class="card-front text-white bg-dark">
<div class="card-body">
<i class="fa fa-search fa-5x float-right"></i>
<h3 class="card-title">Front</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card-back bg-white test2">
<div class="card-body">
<h3 class="card-title">Back</h3>
<p class="card-text">Suprise this one has more more more more content on the back!</p>
Action
</div>
</div>
</div>
</div>

Answer 1

did you want it? if you wedge on the yellow block, you will go back.
$('.card-flip').on('click', function() {
$('.card-front').css('transform', 'rotateY(-180deg)');
$('.card-back').css('transform', 'rotateY(0deg)');
});
$(document).on('click', '.card-back', function() {
$(this).css('transform', '');
$('.card-front').css('transform', '');
});
.card-flip > div {
backface-visibility: hidden;
transition: transform 300ms;
transition-timing-function: linear;
width: 100%;
height: 100%;
margin: 0;
display: flex;
}
.card-front {
transform: rotateY(0deg);
}
.card-back {
transform: rotateY(180deg);
position: absolute;
top: 0;
}
/*.card-flip:hover .card-front {
transform: rotateY(-180deg);
}
.card-flip:hover .card-back {
transform: rotateY(0deg);
}*/
.test{
background-color: green;
}
.test2{
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="card card-flip h-100 test">
<div class="card-front text-white bg-dark">
<div class="card-body">
<i class="fa fa-search fa-5x float-right"></i>
<h3 class="card-title">Front</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class="card-back bg-white test2">
<div class="card-body">
<h3 class="card-title">Back</h3>
<p class="card-text">Suprise this one has more more more more content on the back!</p>
Action
</div>
</div>
</div>
</div>