如何通过单击按钮进行转换答案

【问题标题】：How to do transform with click in button如何通过单击按钮进行转换
【发布时间】：2020-08-20 08:01:07
【问题描述】：

我正在尝试通过按钮使翻转卡工作，它可以正常工作：悬停但我无法通过按钮使其工作。我试过使用 jquery，但没有用，有人可以帮我解决这个问题吗？（我正在使用引导程序）

.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>
                    <a href="#" class="btn btn-outline-secondary">Action</a>
                </div>
            </div>
        </div>
    </div>

【问题讨论】：

我给了你答案。请告诉我，您需要这个吗？

标签： html css hover

【解决方案1】：

你想要吗？如果你楔入黄色块，你会回去。

$('.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>
                    <a href="#" class="btn btn-outline-secondary">Action</a>
                </div>
            </div>
        </div>
    </div>

【讨论】：