html - 单击鼠标翻转卡片

Question

在我的 Blazor 应用程序的 Razor 组件中，我试图通过鼠标单击实现卡片翻转。每次用户单击磁贴时，框都会翻转并在背面显示内容，当用户单击后磁贴时，它会再次翻转到前磁贴。我可以通过悬停来实现它，但我想通过鼠标点击来实现它。这是我的代码以获取更多信息:

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

Answer 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