Переверните карту щелчком мыши

#html #css #bootstrap-4 #blazor

#HTML #css #bootstrap-4 #блейзор

Вопрос:

В компоненте razor моего приложения Blazor я пытаюсь реализовать переворачивание карты по щелчку мыши. Каждый раз, когда пользователь нажимает на плитку, окно будет переворачиваться и отображать содержимое на обратной стороне, а когда пользователь нажимает на заднюю плитку, оно снова переключается на переднюю плитку. Я могу добиться этого с помощью наведения курсора мыши, но я хотел добиться этого с помощью щелчка мыши. Вот мой код для получения дополнительной информации:

 .card-container {
    display: grid;
    perspective: 700px;
}

.card-flip {
    display: grid;
    grid-template: 1fr / 1fr;
    grid-template-areas: "frontAndBack";
    transform-style: preserve-3d;
    transition: all 0.7s ease;
}

.front {
    grid-area: frontAndBack;
}

.back {
    grid-area: frontAndBack;
    transform: rotateY(-180deg);
}

.card-container:hover .card-flip {
    transform: rotateY(180deg);
}

 <!-- Card 2 -->
    <div class="col-md-4 card-container">
      <div class="card-flip">
        <!-- Card 2 Front -->
        <div class="card front">
          <img src="https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg" class="card-img-top img-fluid">
          <div class="card-block">
            <h4 class="card-title">Front Card Title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <!-- End Card 2 Front -->

        <!-- Card 2 Back -->
        <div class="card back">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        <!-- End Card 2 Back -->
      </div>
    </div>
    <!-- End Card 2 -->

Развернуть фрагмент

Ответ №1:

Проще, чем я думал, javascript не требуется. Приятный эффект! Итак, здесь я добавляю / переключаю класс на основе щелчка.

 <div class="col-md-4 card-container" @onclick="FlipMe">
    <div class="card-flip @flipCss">
...
@code {
    bool flipped;
    void FlipMe() => flipped = !flipped;    
    string flipCss => flipped ? "im-flipped" : "";
}

 /*.card-container:hover .card-flip {
    transform: rotateY(180deg);
}*/

.im-flipped {
    transform: rotateY(180deg);
}

Вот рабочий BlazorFiddle

Ответ №2:

Я рекомендую сделать это с помощью javascript или jquery, это очень просто, однако, если вы хотите сделать это только с помощью CSS, вот пример, но <a> элементы больше не будут работать.

 .card-container {
    display: grid;
    perspective: 700px;
    position:relative;
}

.card-flip {
    display: grid;
    grid-template: 1fr / 1fr;
    grid-template-areas: "frontAndBack";
    transform-style: preserve-3d;
    transition: all 0.7s ease;
}

.front {
    grid-area: frontAndBack;
}

.back {
    grid-area: frontAndBack;
    transform: rotateY(-180deg);
}

#flipCard:checked   .card-flip {
    transform: rotateY(180deg);
}

label.flipCard{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  cursor:pointer;
  z-index:9999;
}

 <!-- Card 2 -->

    <div class="col-md-4 card-container">
    <label class="flipCard" for="flipCard"></label>
    <input type="checkbox" id="flipCard" hidden />
      <div class="card-flip">
        <!-- Card 2 Front -->
        <div class="card front">
          <img src="https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg" class="card-img-top img-fluid">
          <div class="card-block">
            <h4 class="card-title">Front Card Title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <!-- End Card 2 Front -->

        <!-- Card 2 Back -->
        <div class="card back">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        <!-- End Card 2 Back -->
      </div>
    </div>
    <!-- End Card 2 -->

Развернуть фрагмент