点击鼠标翻转卡片

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

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