vendredi 28 février 2020

Flip Card doesn't focus and scroll with mouse wheel on both sides

I have a flip card with two long texts and when I am on the front sides it doesn't focus on scroll and doesn't scroll with mouse wheel or by finger when I am on cellphone.

I searched and used similar codes and ideas but none of them helped me. I thank you in advance if you could help me fix it.

my html:

<div class="flipCard"> 
  <div class="card" onclick="this.classList.toggle('flipped');"> 

    <div class="side front"><table><td>This is the front side of my flip card. It's a long text and the scroll doesn't focus and work with mouse wheel automatically.</td></table></div> 

    <div class="side back"><table><td>This is the back side of my flip card. It's a long text and the scroll focuses and works fine with mouse wheel.</td></table></div>

  </div>
</div>

and this is my css sorry that I couldn't summarize it more:

.flipCard {
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
   width: 400px;
   height: 200px;
   position: relative;
   margin: 50px auto;
}

.flipCard .card.flipped {
  transform:rotatey(-180deg);

}

.flipCard .card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 0.5s;
}

.flipCard .card .side {
  width: 100%;
  height: 100%;
  padding: 10px;
  cursor: pointer;
  position: absolute;
  z-index: 2;
  backface-visibility: hidden;  /* W3C */
  overflow: auto;
}

.flipCard .card .back {
  background: white;
  color: black;
  transform:rotatey(-180deg);
}

.flipCard .card .front {
  font-family: Georgia;
  font-size: 3em;
  text-align: center;
  background-color: #7030a0;
}

.flipCard .card .back {
  background-color: #dbb2f9;
  padding: 0.6em;
  font-family: Georgia;
  font-size: 1.0em;
  text-align: center;
}

table{
    height: 100%;
    width: 100%;
}
td{
    vertical-align: middle;
    text-align: center;
}
.front td{
  color: white;
  font-family: Georgia;
  font-size: 1.0em;
}
.back td{
  font-family: Georgia;
  font-size: 2.5em;
}

I have my code here too: https://codepen.io/teslapixela/pen/xxGdvoG




Aucun commentaire:

Enregistrer un commentaire