Flip a card on mouse click

Question

In a razor component of my Blazor application, I'm trying to implement a card-flip on mouse click. Every time the user clicks the tile the box will flip and display the content on the back and when the user clicks the back tile it will flip again to the front tile. I'm able to achieve it through hover but I wanted to achieve it through mouse click. Here's my code for more info:

.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);
}


    
      
        
        
          
          
            Front Card Title
            Some quick example text to build on the card title and make up the bulk of the card's content.
            Last updated 3 mins ago
          
        
        

        
        
          
            Featured
          
          
            Special title treatment
            With supporting text below as a natural lead-in to additional content.
            Go somewhere

user_1492496 · Answer

Easier than I thought, no javascript required. Nice effect! So here I am adding/toggling a class based on click.


    
...
@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);
}

Here is a working BlazorFiddle

user_9765951 · Answer

I recommend to do it with javascript or jquery, it's very easy, however, if you want to do it with CSS only, here is an example, but the elements will no longer work.

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



    
    
    
      
        
        
          
          
            Front Card Title
            Some quick example text to build on the card title and make up the bulk of the card's content.
            Last updated 3 mins ago
          
        
        

        
        
          
            Featured
          
          
            Special title treatment
            With supporting text below as a natural lead-in to additional content.
            Go somewhere

Flip a card on mouse click

2 Answers