Flip card on click-CodePudding

I made blocks that when you click on them they are turning around. Well.. it works,but as always there is gonna be a but. First click is working propetly, but second one makes block turn around very quick and then it comes back to default position. After I clicked once problem is gone. I gotta do it with every single block. here's a link, but you have to insert jquery library (it is above js code)

checkClick = true;
function seeBlock(block){
            $(block).click(function(){

                if(checkClick == true)
                {    
                    $(".block.front"   block).css({"transform": "rotateY(180deg)"});
                    $(".block.back"   block).css({"transform": "rotateY(0deg)"});
                    checkClick = false;
                }
                else if(checkClick == false)
                {    
                    $(".block.front"   block).css({"transform": "rotateY(0deg)"});
                    $(".block.back"   block).css({"transform": "rotateY(180deg)"});
                    checkClick = true;
                }
            }); 
        }
        seeBlock(".block1");
        seeBlock(".block2");
        seeBlock(".block3");
        seeBlock(".block4");
        seeBlock(".block5");
        seeBlock(".block6");

.block {
    color:#7a7a7a;
    width: 300px;
    height: 170px;
    background-color: #8ee1f4;
    box-shadow: 0px 6px 24px 0px rgba(142, 225, 244, 1);
    margin: 15px;
    float: left;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 15px;
    cursor: pointer;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000px;
    transition: all 700ms ease;

}
.block:hover {
    background-color: #65dbf5;
}
.block.back {
    transform: rotateY(-180deg);
}
/* .blocks:hover .block.front{
    transform: rotateY(180deg);
}
.blocks:hover .block.back{
    transform: rotateY(0deg);
} */
.block.front.block2, .block.back.block2  {
    margin-left: 400px;
}
.block.front.block3, .block.back.block3  {
    margin-left: 800px;
}
.block.front.block4, .block.back.block4  {
    margin-top: 250px;
}
.block.front.block5, .block.back.block5  {
    margin-top: 250px;
    margin-left: 400px;
}
.block.front.block6, .block.back.block6  {
    margin-top: 250px;
    margin-left: 800px;
}
.back {
    font-size: 1.2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
            <div >Trampoliny</div>
            <div >rekreacyjne, skośne, sportowe ścieżki , basen z gąbkami, air bag i jeszcze kilka niespodzianek czeka na was.</div>
        </div>
        <div >
            <div >BAYBY GYM</div>
            <div >to tu odbywa się najlepsza zabawa poprzez sport dla najmłodszych. Pokonywanie miękkich przeszkód, podstawy gimnastyki wspólne wygłupy z rodzicami.</div>
        </div>
        <div >
            <div >Klocki</div>
            <div >Nic tak nie rozwija jak klocki. Małe, duże i wielkie klocki ,a to nie wszystko, mamy coś jeszcze.</div>
        </div>
        <div >
            <div >Cafe</div>
            <div >Podczas gdy wasze dzieci będą spędzały kolejne godziny na nieograniczonych atrakcjach wy możecie rozkoszować się wspaniałą kawą i ciastem w naszej kawiarni.</div>
        </div>
        <div >
            <div >SALA GIMNASTYCZNA</div>
            <div >najlepsze miejsce do treningu wyczynowego jak i amatorskiego. Poprawa koordynacji, gibkość ,szybkość, sprawność i zdrowie .</div>
        </div>
        <div >
            <div >Joga</div>
            <div > idealny sposób na harmonie ciała i duszy, nasza sala do jogi a na niej zajęcia również dla mam z dziećmi.</div>
        </div>

Thanks in advance

CodePudding user response：

You have been using a variable checkClick that is global to all your blocks, which can only make things complicated. When you click on one block, it updates its value for all the others. You need to store the state of a block within the block itself (as a class for example).

The modification I came up with is this :

function seeBlock(block){
  $(block).click(function(){

    // If block has not yet been clicked flip it
    if(! $(block).hasClass('clicked'))
    {    
      $(".block.front"   block).css({"transform": "rotateY(180deg)"});
      $(".block.back"   block).css({"transform": "rotateY(0deg)"});

      $(block).toggleClass('clicked'); // Adds the class .clicked
    }
    // Otherwise flip it back
    else
    {    
      $(".block.front"   block).css({"transform": "rotateY(0deg)"});
      $(".block.back"   block).css({"transform": "rotateY(180deg)"});

      $(block).toggleClass('clicked'); // Removes the class .clicked
    }
  }); 
}
seeBlock(".block1");
seeBlock(".block2");
seeBlock(".block3");
seeBlock(".block4");
seeBlock(".block5");
seeBlock(".block6");

CodePudding user response：

In the CSS the rotateY rulset the value was -180 but the jQuery has it as 180:

.block.back {
  transform: rotateY(180deg);// <== was at -180
  ....
}

Also, I slowed it down a tad:

.block {
  ....
  transition: all 1s ease;
}

checkClick = true;
function seeBlock(block){
            $(block).click(function(){

                if(checkClick == true)
                {    
                    $(".block.front"   block).css({"transform": "rotateY(180deg)"});
                    $(".block.back"   block).css({"transform": "rotateY(0deg)"});
                    checkClick = false;
                }
                else if(checkClick == false)
                {    
                    $(".block.front"   block).css({"transform": "rotateY(0deg)"});
                    $(".block.back"   block).css({"transform": "rotateY(180deg)"});
                    checkClick = true;
                }
            }); 
        }
        seeBlock(".block1");
        seeBlock(".block2");
        seeBlock(".block3");
        seeBlock(".block4");
        seeBlock(".block5");
        seeBlock(".block6");

.block {
    color:#7a7a7a;
    width: 300px;
    height: 170px;
    background-color: #8ee1f4;
    box-shadow: 0px 6px 24px 0px rgba(142, 225, 244, 1);
    margin: 15px;
    float: left;
    font-size: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 15px;
    cursor: pointer;
    position: absolute;
    backface-visibility: hidden;
    perspective: 1000px;
    transition: all 1s ease;

}
.block:hover {
    background-color: #65dbf5;
}
.block.back {
    transform: rotateY(180deg);
}
/* .blocks:hover .block.front{
    transform: rotateY(180deg);
}
.blocks:hover .block.back{
    transform: rotateY(0deg);
} */
.block.front.block2, .block.back.block2  {
    margin-left: 400px;
}
.block.front.block3, .block.back.block3  {
    margin-left: 800px;
}
.block.front.block4, .block.back.block4  {
    margin-top: 250px;
}
.block.front.block5, .block.back.block5  {
    margin-top: 250px;
    margin-left: 400px;
}
.block.front.block6, .block.back.block6  {
    margin-top: 250px;
    margin-left: 800px;
}
.back {
    font-size: 1.2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
            <div >Trampoliny</div>
            <div >rekreacyjne, skośne, sportowe ścieżki , basen z gąbkami, air bag i jeszcze kilka niespodzianek czeka na was.</div>
        </div>
        <div >
            <div >BAYBY GYM</div>
            <div >to tu odbywa się najlepsza zabawa poprzez sport dla najmłodszych. Pokonywanie miękkich przeszkód, podstawy gimnastyki wspólne wygłupy z rodzicami.</div>
        </div>
        <div >
            <div >Klocki</div>
            <div >Nic tak nie rozwija jak klocki. Małe, duże i wielkie klocki ,a to nie wszystko, mamy coś jeszcze.</div>
        </div>
        <div >
            <div >Cafe</div>
            <div >Podczas gdy wasze dzieci będą spędzały kolejne godziny na nieograniczonych atrakcjach wy możecie rozkoszować się wspaniałą kawą i ciastem w naszej kawiarni.</div>
        </div>
        <div >
            <div >SALA GIMNASTYCZNA</div>
            <div >najlepsze miejsce do treningu wyczynowego jak i amatorskiego. Poprawa koordynacji, gibkość ,szybkość, sprawność i zdrowie .</div>
        </div>
        <div >
            <div >Joga</div>
            <div > idealny sposób na harmonie ciała i duszy, nasza sala do jogi a na niej zajęcia również dla mam z dziećmi.</div>
        </div>