2

Я пытаюсь перевернуть карточку с помощью CSS click-event, используя input, который скрыт. Каждый раз, когда пользователь щелкает по карточке, она будет переворачиваться и отображать содержимое на обратной стороне. При повторном клике, карточка снова перевернется на вид спереди.

Вот мой фрагмент кода для получения дополнительной информации:

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

Свободный перевод вопроса How can I make a card flip with css click-event using an input box? от участника @stephdev.

1

1 ответ 1

3

Я сделал несколько изменений в вашем коде. Для ясности я оставил checkbox видимым, но вы можете скрыть его.

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>

Свободный перевод ответа How can I make a card flip with css click-event using an input box? от участника @enxaneta.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.