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