html - 如何使用输入框使用 css click-event 进行卡片翻转?
问题描述
我正在尝试使用隐藏在框中的输入类型使用 CSS click-event 进行卡片翻转,每次用户单击图块时,框都会翻转并在背面显示内容,当用户单击时后瓷砖它会再次翻转到前瓷砖。这是我的代码片段以获取更多信息:
.container {
padding: 12rem;
display: flex;
justify-content: center;
}
.tile {
perspective: 100rem;
-moz-perspective: 100rem;
position: relative;
width: 50%;
cursor: pointer;
margin-right: 5rem;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.tile-back, .tile-front {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tile-back {
transform: rotateY(180deg);
}
.tile-back, .tile-back .card-body {
font-size: 1.5rem;
width: 50%;
text-align: center;
}
.card {
background-color: #58AA3F;
height: 20rem;
transition: all .8s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 600ms;
transition: all 600ms;
z-index: 20;
}
.card div {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-body {
font-size: 2rem;
color: #fff;
text-align: center;
}
.card-footer {
font-size: 2rem;
}
.card:hover .card {
-webkit-transform: rotateX(20deg);
transform: rotateX(20deg);
box-shadow: 0 20px 20px rgba(50, 50, 50, 0.2);
}
.card input {
display: none;
}
.card :checked + .card {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
}
.card:hover :checked + .card {
transform: rotateX(160deg);
-webkit-transform: rotateX(160deg);
box-shadow: 0 20px 20px rgba(255, 255, 255, 0.2);
}
<div class="tile">
<input type="checkbox"/>
<div class="card tile-front">
<div class="card-body">
<p>Click to display back</p>
</div>
</div>
<div class="card tile-back">
<div class="card-body">
<p>Click to display front</p>
</div>
</div>
</div>
如果我的代码中缺少输入未触发的内容,我不会这样做。
解决方案
我对您的代码进行了一些更改。为清楚起见,我让复选框可见,但您可以隐藏它。
label[for=test] {
display:block;
-webkit-perspective: 800px;
perspective: 800px;
}
.reversible {
position: relative;
width: 250px;
margin: 50px auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: transform 1s ease;
transition: all 1s
}
input[type=checkbox]:checked + label .reversible {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.reversible .card {
position: absolute;
left: 0;
top: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.tile-front {
z-index: 2;
}
.tile-back {
-webkit-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card-body {
font-size: 2rem;
color: #fff;
text-align: center;
}
.card-footer {
font-size: 2rem;
}
.card {
background-color: #58AA3F;
height: 20rem;
transition: all .8s ease;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
}
<input type="checkbox" id="test"/>
<label for="test">
<div class="reversible">
<div class="card tile-back">
<div class="card-body">
<p>Click to display back</p>
</div>
</div>
<div class="card tile-front">
<div class="card-body">
<p>Click to display front</p>
</div>
</div>
</div>
</label>
我希望它有帮助
推荐阅读
- x86-64 - 单核速度是否受益于巨大的三级缓存?
- javascript - 如何在画布上绘制网格?
- css - Bootstrap 4 中的 .h1 .h2 .h3 .h4 .h5 .h6 类
- javascript - 使用javascript而不是jquery在滚动时触发CSS动画
- spring-boot - 如何禁用 Okta 自动配置以进行测试?
- php - 需要帮助来显示 JSON 数据
- java - 如何从 Map 形成 REST 响应
>? - python - atof 返回无法将字符串转换为浮点数:'2, 5'
- java - 将 HashMap 错误消息内容转换为 JSON
- excel - VBA vlookup - 数字列问题