How can I make a card flip with css click-event using an input box?

Question

I'm trying to make a card-flip with CSS click-event using an input type that is hidden in the box that every time the user clicks the tile the box will flip and display the content on the back and when the user clicks the back tile it will flip again to the front tile. Here's my code snippet for more info:

.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>

I don't if there's something missing in my code that the input isn't triggering.

Answer 1

I've made a few changes to your code. For clarity I've left the checkbox visible, but you may hide it.

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>

I hope it helps

Answer 2

Using this codepen as a basis, I changed it to work with a checkbox

body {
  font-family: sans-serif;
}

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 10px 0;
  perspective: 600px;
}

input {
  display: none;
}

label {
  width: 200px;
  height: 260px;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

#card:checked + label .card {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: red;
}

.card__face--back {
  background: blue;
  transform: rotateY(180deg);
}

<div class="scene scene--card">
  <input id="card" type="checkbox">
  <label for="card">
    <div class="card">
      <div class="card__face card__face--front">front</div>
      <div class="card__face card__face--back">back</div>
    </div>
  </label>
</div>