Currently I am facing the problem that each button triggers both cards to flip. However, I am aiming for each button to flip only the appropriate card (not both of them). Is it possible to extent this jquery function on as many cards as I want?
I hope my problem becomes clear when looking at the code snippet.
Any hints are highly appreciated.
Regards
.wrappercard {
width: 285px;
height: 350px;
margin-top: 50px;
margin-left: 50px;
}
.containercard {
height: 330px;
width: 285px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
/* Front Styling */
.card .front {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
}
/*Back Styling*/
.card .back {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
overflow: hidden;
}
/*Button flip*/
.btnflip {
border: none;
background: none;
margin-left: 50%;
transform: translate(-50%);
width: 100%;
margin-top: 10px;
font-size: 14px;
font-weight: lighter;
cursor: pointer;
padding: 3px 20px 3px 20px;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.20);
border-radius: 4px;
transition: 0.3s ease-in-out;
}
.btnflip:hover {
background-color: white;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.80);
transition: 0.3s ease-in-out;
}
.btnflip:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip" onclick="flip()">Anfragen</button>
</div>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip" onclick="flip()">Anfragen</button>
</div>
<script>
function flip() {
$('.card').toggleClass('flipped');
}
</script>
If you add the event handler via jquery then you get this, which is the button clicked.
<button class="btnflip">Anfragen</button>
then you can use relative path traversal to find the related card:
$(function() {
$(".btnflip").click(function() {
$(this).closest(".wrappercard").find('.card').toggleClass('flipped');
})
});
$(function() {
$(".btnflip").click(function() {
$(this).closest(".wrappercard").find('.card').toggleClass('flipped');
})
});
.wrappercard {
width: 285px;
height: 350px;
margin-top: 50px;
margin-left: 50px;
}
.containercard {
height: 330px;
width: 285px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
/* Front Styling */
.card .front {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
}
/*Back Styling*/
.card .back {
background: white;
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.8);
border-radius: 5px;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
overflow: hidden;
}
/*Button flip*/
.btnflip {
border: none;
background: none;
margin-left: 50%;
transform: translate(-50%);
width: 100%;
margin-top: 10px;
font-size: 14px;
font-weight: lighter;
cursor: pointer;
padding: 3px 20px 3px 20px;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.20);
border-radius: 4px;
transition: 0.3s ease-in-out;
}
.btnflip:hover {
background-color: white;
box-shadow: 0px 0px 14px rgba(50, 59, 74, 0.80);
transition: 0.3s ease-in-out;
}
.btnflip:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip">Anfragen</button>
</div>
<div class="wrappercard">
<section class="containercard">
<div class="card">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</section>
<button class="btnflip">Anfragen</button>
</div>
Related
The issue is that if you do the mouseenter and wiggle your mouse around fast, it will trigger the flipping action multiple times, making it flicker or look strange. Is there a better way to do what I'm doing here?
jQuery('.card').mouseenter(function(e) {
e.stopPropagation();
jQuery(this).addClass('flipped');
}).mouseleave(function(e) {
e.stopPropagation();
jQuery(this).removeClass('flipped');
});
.card {
width: 150px;
height: 300px;
position: absolute;
cursor: pointer;
background-color: purple;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .front h3 {
font-size: 30px;
}
.card .back p {
height: 75px;
}
.card .front .card-text {
padding: 0 25px;
height: 100px;
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
background-color: #ffffff;
text-align: center;
display: flex;
align-items: center;
}
.card .back {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .apply-link {
text-decoration: none;
background-color: #fff;
color: #000;
padding: 8px 20px;
}
.card .back h3 {
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<div class="front">
<h3>Big Header</h3>
<div class="card-text">Info text here</div>
</div>
<div class="back" style="background-color: #b24377">
<h3>Up to 40% off</h3>
<p>Text here </p>
Apply Now
</div>
</div>
The issue is that if you do the mouseenter and wiggle your mouse around fast, it will trigger the flipping action multiple times, making it flicker or look strange. Is there a better way to do what I'm doing here?
One way to solve the issue is to add a wrapper around the card and listen to events on the wrapper instead of the card
jQuery('.wrapper').mouseenter(function(e) {
e.stopPropagation();
let $this = jQuery(this).find('.card');
if(!$this.hasClass('flipped')){
$this.addClass('flipped');
}
}).mouseleave(function(e){
e.stopPropagation();
jQuery(this).find('.card').removeClass('flipped');
});
.wrapper{
width: 150px;
height: 300px;
}
.card {
width: 100%;
height: 100%;
cursor: pointer;
background-color: purple;
/* Set the transition effects */
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
text-align: center;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
}
.card .front h3 {
font-size: 30px;
}
.card .back p {
height: 75px;
}
.card .front .card-text {
padding: 0 25px;
height: 100px;
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
background-color: #ffffff;
text-align: center;
display: flex;
align-items: center;
}
.card .back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card .apply-link {
text-decoration: none;
background-color: #fff;
color: #000;
padding: 8px 20px;
}
.card .back h3 {
font-size: 24px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="card">
<div class="front">
<h3>Big Header</h3>
<div class="card-text">Info text here</div>
</div>
<div class="back" style="background-color: #b24377">
<h3>Up to 40% off</h3>
<p>Text here </p>
Apply Now
</div>
</div>
</div>
This jsFiddle is taken from what I am building, on jsFiddle it works without issue. The function flips the card - no problem. However, when running it on my local host the card sometimes (often the first time a card is flipped but then not thereafter) disappears for a few seconds before reappearing. I think this may be related to the fact that there is an image on the front of the card, as this does not disappear. Is there any bug visible in my code, or is there a work around for problems like this perhaps?
The CSS is extensive but I wanted to copy it in exactly as is in case the source of the problem lies therein.
$(function() {
$('.card-container').on("click", function() {
$(this).find('.card').toggleClass("flipped");
});
});
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.card div {
display: block;
height: 100%;
width: 100%;
line-height: 290px;
color: grey;
text-align: center;
font-weight: bold;
font-size: 24px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
border-radius: 2px;
background: url(../../public/images/card.png) no-repeat;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.card .back {
border-radius: 2px;
background: url(../../public/images/card.png) no-repeat;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.reviewflag {
max-height: 35px;
padding-top: 1px;
padding-bottom: 1px;
position: fixed;
margin-left: 48%;
margin-top: 20px;
opacity: 0.7;
left: 0;
display: inline-block;
}
.carddissappears {
display: none;
}
.language {
margin-left: 80%;
}
.cardword {
font-size: 20px;
margin-top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-container">
<div class="card">
<div class="front" style="background-color: blue;">
<img class="reviewflag" src="https://cdn.countryflags.com/thumbs/spain/flag-button-round-250.png">
<p class="cardword">Hola</p>
</div>
<div class="back">
<p class="cardword">Bonjour</p>
</div>
</div>
</div>
I use the following code to rotate my CSS card. The problem is when I have a few cards and they all rotate when clicking any button.
I would like to rotate only the card which contains clicked button.
I suppose I should to add a context to my cards by using 'this', but I cannot do it right.
$('button').click(function () {
$('.card').toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card {
width: 99%;
height: 200px;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped: {}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card1</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 1</button>
</div>
<br>
<br>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card2</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 2</button>
</div>
I would like to rotate only the card which contains clicked button.
The cards don't contain the button, but their parents do. You can use closest to find the cardContainer, then find to find the card:
$('button').click(function () {
$(this).closest('.cardContainer').find('.card').toggleClass('flipped');
});
$('button').click(function() {
$(this).closest('.cardContainer').find('.card').toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card {
width: 99%;
height: 200px;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped: {} .card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card1</h3>
</div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 1</button>
</div>
<br>
<br>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card2</h3>
</div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 2</button>
</div>
Or as they're siblings, use siblings:
$('button').click(function () {
$(this).siblings('.card').toggleClass('flipped');
});
$('button').click(function() {
$(this).siblings('.card').toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card {
width: 99%;
height: 200px;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card.flipped: {} .card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card1</h3>
</div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 1</button>
</div>
<br>
<br>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card2</h3>
</div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 2</button>
</div>
Use sibling for it. Check following JQuery:
$('button').click(function () {
$(this).siblings(".card").toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card {
width: 99%;
height: 200px;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped: {}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card1</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 1</button>
</div>
<br>
<br>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front">
<h3 class="cardTitle">Card2</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button">Rotate card 2</button>
</div>
You can add context using attributes in html that will also be the class of the cards as shown below.
.sibling() in jquery will also work but it needs your html to have exact same sequence of elements
$('button').click(function () {
var cardClass=$(this).attr('data-card');
$('.'+cardClass).toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card {
width: 99%;
height: 200px;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card.flipped: {}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 cardContainer">
<div class="card red card-1">
<div class="front">
<h3 class="cardTitle">Card1</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button" data-card="card-1">Rotate card 1</button>
</div>
<br>
<br>
<div class="col-md-3 cardContainer">
<div class="card red card-2">
<div class="front">
<h3 class="cardTitle">Card2</h3></div>
<div class="back">
<div class="content">
</div>
</div>
</div>
<button type="button" data-card="card-2">Rotate card 2</button>
</div>
You can use .prev() to get the previous sibling which in your example is the card, but be aware that changes to your html structure could break it.
$('button').click(function () {
$(this).prev().toggleClass('flipped');
});
I want to rotate CSS card by click on specific button.
Right now I can rotate it by clicking anywhere.
How should I make it change only on button click?
I try to change in javascript code ('.card') to ('#rotate') and add that id to the button, but it doesn't work.
$('.card').click(function(){
$(this).toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer
{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card
{
width: 99%;
height: 200px;
cursor: pointer;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped
{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card.flipped:
{
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front"><h3 class="cardTitle">Flip me!</h3></div>
<div class="back">
<div class="content">
<h3 class="cardTitle">Back side</h3>
<br/>
<p id="happy"></p>
</div>
</div>
</div>
</div>
<br>
<button type="button">Rotate card</button>
Simply change your click handler:
$('button').click(function(){
$('.card').toggleClass('flipped');
});
$('#rotate').click(function(){
$(".card").toggleClass('flipped');
});
.animation {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cardContainer
{
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
/*depth of the elements */
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
/*border: 1px solid #ff0000;*/
padding-left: 1%;
}
.card
{
width: 99%;
height: 200px;
cursor: pointer;
/*transition effects */
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped
{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card.flipped:
{
}
.card .front,
.card .back {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
color: white;
text-align: center;
font-size: 4em;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {
width: 100%;
padding-left: 3%;
padding-right: 3%;
font-size: 16px;
text-align: left;
line-height: 25px;
}
.card .back {
background: #03446A;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="col-md-3 cardContainer">
<div class="card red">
<div class="front"><h3 class="cardTitle">Flip me!</h3></div>
<div class="back">
<div class="content">
<h3 class="cardTitle">Back side</h3>
<br/>
<p id="happy"></p>
</div>
</div>
</div>
</div>
<br>
<button id="rotate" type="button">Rotate card</button>
Here your solution, you just trying to rotate button when you click with id with $(this), you need to rotate the div
Here You go:
$('.turnIt').click(function(){
$(".card").toggleClass('flipped');
});
http://codepen.io/damianocel/pen/QjZGjV
Hi I am implementing the flip of the tile once it is get zoom.
I am unable to add the css to the new class which I am adding in the jquery.
i need some help regarding this. Use Case is once you hover on the tile it will get zoom then I am adding a new class on click of the tile and I am adding css for that but it is not working. initially i need to show the front text, once I clicked on the tile then the front text should get hide and the back text to be visible and vise versa.
This is what I have tried:
HTML:
<div class="boxes">
<div class="box">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>
Css:
.boxes {
-webkit-transform: translateZ(0);
position: relative;
width: 600px;
height: 700px;
top: 0px;
}
.box {
-moz-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-moz-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-o-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
width: 140px;
height: 140px;
font-family: Helvetica, sans-serif;
text-align: center;
padding: 13px 10px;
margin: 0 5px;
background-color: #fefefe;
background: -moz-linear-gradient(90deg, #eee, #fff, #eee);
background: -webkit-gradient(linear, left top, left bottom, from(#eee),
color-stop(0.5, #fff), to(#eee) );
border: 3px solid #e1e1e1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 15px;
cursor: pointer;
}
.box:hover {
border-color: #e1e1e1;
-webkit-box-shadow: #666 0px 0px 6px;
-moz-box-shadow: #666 0px 0px 6px;
box-shadow: #666 0px 0px 6px;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), color-stop(0.5, #fff), to(#e1e1e1));
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.flip {
-webkit-transform: rotatex(-180deg)!important;
}
.front {
z-index: 1;
cursor: pointer;
}
.back {
-webkit-transform: rotatex(-180deg);
color: black;
cursor: pointer;
}
JQuery:
$('.box').click(function(e){
alert('hai');
$(this).addClass('flip').mouseleave(function(){
$(this).removeClass('flip');
});
});
Demo Link
look at this code: DEMO
I added some class and change in your html and css:
CSS:
.box-container{
width:166px;
height:172px;
}
.box-container .box.clicked .back{
opacity:1;
}
.box-container .box.clicked .front{
opacity:0;
}
.box-container .box.clicked{
-webkit-transform:scaleY(-1);
}
.face{
transition: all 0.5s linear;
}
JQuery:
$(".box").click(function(){
$(this).toggleClass("clicked");
});
I did some modifications on your JSFiddle, see this fork: http://jsfiddle.net/u3z6Y/6/
Basically what I do is
Applying a class on the wrapper instead of the box to be able to target the flipped versions of front and back:
$('.box').click(function(e){
$('.boxes').toggleClass('flip');
// ..
});
Targeting both the flipped and the non-flipeed version from CSS:
.front {
z-index: 1;
cursor: pointer;
-webkit-transform: rotatex(0deg)!important;
}
.back {
-webkit-transform: rotatex(-180deg);
color: black;
cursor: pointer;
}
.flip .front {
-webkit-transform: rotatex(-180deg)!important;
}
.flip .back {
-webkit-transform: rotatex(0deg)!important;
}