how to make CSS transition when Item is clicked?

user_9150455 0
Viewed 651

I have created a pen here(https://codepen.io/rupamkairi/pen/ExjJRMo?editors=1100) on codepen. The card is made to rotate(specifically to Flip) when hovered on the element. I want it to be flip when I click on the element(.card).

.card {
  margin: auto;
  width: 5em;
  height: 8em;
  background-color: transparent;
  perspective: 250px;
}

.card-content {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

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

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-back {
  border-radius: 5px;
  background-color: white;
  transform: rotateY(180deg);
}
<div class="card">
  <div class="card-content">
    <div class="card-front">
      <h1></h1>
    </div>
    <div class="card-back">
      <h1></h1>
    </div>
  </div>
</div>

I tried using :active pseudo-class but in that case I need to hold the card to keep it fliped.

Is there any way to use css animation with javascript?

I want to make multiple cards on a single page, and make them flip when clicked.

css-animations css html javascript
3 Answers

If you want the card to toggle the flip on every click try this:

const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");
let flipped = false;

card.addEventListener("click", () => {
    if(!flipped) {
        cardContent.style.transform = "rotateY(180deg)"
    }   else {
        cardContent.style.transform = "rotateY(0deg)"
    }
    flipped = !flipped;
});

Or if you want the card to be flipped only once try this:

const card = document.querySelector(".card");
const cardContent = document.querySelector(".card-content");

card.addEventListener("click", () => {
    cardContent.style.transform = "rotateY(180deg)";
});

As it's implemented through JavaScript remove .card:hover .card-content { transform: rotateY(180deg);} from stylesheet.

user_104788040

Initially add the id to the div tag where class = "card" like

HTML 

<div class="card" id ="card1">
  <div class="card-content">
    <div class="card-front">
      <h1></h1>
    </div>
    <div class="card-back">
      <h1></h1>
    </div>
  </div>
</div>

Here you set the id as card1 and then you must you the following simple JS like 

<script>
document.getElementById("card1").onclick = function(){
document.getElementById("card1").style.transform = rotateY(180deg);
}
</script>

This is a simple way by which you can achieve what you want.

user_106521940

just change .card:hover .card-content
to .card.flip .card-content

and add js code:

const card = document.querySelector('.card')

card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');

demo:

const card = document.querySelector('.card')

card.onclick=_=>card.classList.add('flip');
card.onmouseout=_=>card.classList.remove('flip');
html,
body {
 margin: 0px;
 padding: 0px;
 border: 0px;
 font-family: "Roboto", sans-serif;
 background-color: #96cfe1;
}
.container {
 padding: 10%;
}
.card {
 margin: auto;
 width: 5em;
 height: 8em;
 background-color: transparent;
 perspective: 250px;
}
.card-content {
 position: relative;
 width: 100%;
 height: 100%;
 border-radius: 5px;
 box-shadow: 0px 5px 15px #00000080;
 transition: transform 0.5s;
 transform-style: preserve-3d;
}
.card.flip .card-content {
 transform: rotateY(180deg);
}
.card-front,
.card-back {
 position: absolute;
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
}
.card-back {
 border-radius: 5px;
 background-color: white;
 transform: rotateY(180deg);
}
<div class="container">
  <div class="card">
    <div class="card-content">
      <div class="card-front">
        <h1></h1>
      </div>
      <div class="card-back">
        <h1></h1>
      </div>
    </div>
  </div>
</div>

user_106690100
Related