CSS - Flip Card

Voltea la tarjeta al hacer clic sobre ella...

<!------ FLIP-CARD 2------>

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

/** FLIP-CARD 2.0 **/

.scene--card {

  width: 200px;

  height: 400px;

  /* Adds a 3D perspective to the container */

  perspective: 1000px;

}

/* Visually hides the checkbox */

.scene--card input[type="checkbox"] {

  display: none;

}

.card {

  width: 100%;

  height: 100%;

  position: relative;

  transition: transform 0.6s;

  /* Ensures the child elements are positioned in 3D space */

  transform-style: preserve-3d;

  cursor: pointer;

}

/* Rotates the card when the checkbox is checked */

.scene--card input[type="checkbox"]:checked ~ label .card {

  transform: rotateY(180deg);

}

.card_face {

  position: absolute;

  width: 100%;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 8px;

  font-size: 2rem;

  font-weight: bold;

  color: white;

  /* Hides the back of the card when it's facing away */

  backface-visibility: hidden;

}

.card_face--front {

  background-color: #3498db;

}

.card_face--back {

  background-color: #2ecc71;

  /* Initially rotates the back face to be hidden */

  transform: rotateY(180deg);

}