Flip Card Activated By Click

我正在尝试制作一张点击时会翻转的翻转卡(即不：悬停或：激活)。没有任何装饰(除了影子，这是对朋友挑战的回应)，只有基本功能。我关注了关于这种方法的各种有用的帖子，但我无法使其发挥作用。有人能看到我做错了什么吗？编辑：很抱歉，在阅读了这里的其他帖子后，我的工作中还有一些旧代码。复选框的代码现已删除。EDIT2:解决了它。需要jQuery"ready"方法，如下面代码中所添加的。

<!DOCTYPE html>
<html>
<head>
<title>Flip Card Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.card').click(function(e){
e.preventDefault();
$(this).toggleClass('flipped');
})
})
</script>
<style>
.card {
width: 300px;
height: 300px;
margin: 25px;
perspective: 1000px;
cursor: pointer;
transition: transform 1s;
transform-style: preserve-3d;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}
.card.flipped {
transform: rotateY( 180deg );
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
padding: 25px;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.card-back {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="card">
<div class="card-front">
The front
</div>
<div class="card-back">
The back
</div>
</div>
</body>
</html>

要实现这一点，您只需要执行以下

$('.card').click(function(e){
e.preventDefault();
$(this).toggleClass('flipped');
})

无论如何，这给我提出了许多问题

为什么这里需要jquery，你可以使用:checked在纯CSS中完成它
如果在用于包装和标签的类card中添加了一个点击处理程序，这会导致不必要的触发该处理程序，我建议您为需要点击处理程序的元素提供特殊的类名(例如js-handler-click)

$('.card').click(function(e){
e.preventDefault();
$(this).toggleClass('flipped');
})

.card {
width: 300px;
height: 300px;
margin: 25px;
perspective: 1000px;
cursor: pointer;
transition: transform 1s;
transform-style: preserve-3d;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}
.card.flipped {
transform: rotateY( 180deg );
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
padding: 25px;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.card-back {
transform: rotateY(180deg);
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="card">
<div class="card-front">
The front
</div>
<div class="card-back">
The back
</div>
</div>

相关内容

最新更新

热门标签：