如何解决如何使用点击按钮进行转换
我正在尝试通过按钮使翻转卡工作,它与:hover一起正常工作,但是我不能使其与按钮一起工作。我尝试过使用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>
解决方法
您想要吗?如果您踩到黄色方块,您将返回。
$('.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。