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 class="blocks">
<div class="block front block1">Trampoliny</div>
<div class="block back block1">rekreacyjne, skośne, sportowe ścieżki , basen z gąbkami, air bag i jeszcze kilka niespodzianek czeka na was.</div>
</div>
<div class="blocks">
<div class="block front block2">BAYBY GYM</div>
<div class="block back block2">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 class="blocks">
<div class="block front block3">Klocki</div>
<div class="block back block3">Nic tak nie rozwija jak klocki. Małe, duże i wielkie klocki ,a to nie wszystko, mamy coś jeszcze.</div>
</div>
<div class="blocks">
<div class="block front block4">Cafe</div>
<div class="block back block4">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 class="blocks">
<div class="block front block5">SALA GIMNASTYCZNA</div>
<div class="block back block5">najlepsze miejsce do treningu wyczynowego jak i amatorskiego. Poprawa koordynacji, gibkość ,szybkość, sprawność i zdrowie .</div>
</div>
<div class="blocks">
<div class="block front block6">Joga</div>
<div class="block back block6"> 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
>Solution :
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 class="blocks">
<div class="block front block1">Trampoliny</div>
<div class="block back block1">rekreacyjne, skośne, sportowe ścieżki , basen z gąbkami, air bag i jeszcze kilka niespodzianek czeka na was.</div>
</div>
<div class="blocks">
<div class="block front block2">BAYBY GYM</div>
<div class="block back block2">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 class="blocks">
<div class="block front block3">Klocki</div>
<div class="block back block3">Nic tak nie rozwija jak klocki. Małe, duże i wielkie klocki ,a to nie wszystko, mamy coś jeszcze.</div>
</div>
<div class="blocks">
<div class="block front block4">Cafe</div>
<div class="block back block4">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 class="blocks">
<div class="block front block5">SALA GIMNASTYCZNA</div>
<div class="block back block5">najlepsze miejsce do treningu wyczynowego jak i amatorskiego. Poprawa koordynacji, gibkość ,szybkość, sprawność i zdrowie .</div>
</div>
<div class="blocks">
<div class="block front block6">Joga</div>
<div class="block back block6"> 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>