我正在尝试使用隐藏在框中的输入类型使用 CSS 单击事件制作卡片翻转，每次用户单击图块时，框将翻转并在背面显示内容，当用户单击后瓷砖它将再次翻转到前瓷砖。这是我的代码片段以获取更多信息：
.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: …