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>
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>
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>
i'm trying flip this 2 faced cube so it looks like it is always rotating up.
here is what I have so far
demo
https://jsfiddle.net/m5z0u6ct/2/
I increase the degrees by 90 degrees each time you click the button.
but at 270 degrees the cube rotates down.
1) How can I make it so the cube continually rotates up on each click?
2) How can I prevent the text from flipping after the 2nd click? (I'd like the text to always look right side up like it does on the first two clicks)
/* Container box to set the sides relative to */
.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; /* <-NB */
}
/* The two faces of the cube */
.flippety,.flop {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
height: 100px;
}
/* Position the faces */
.flippety {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
.flop {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}
/* Rotate the cube */
.cube:hover {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}
.cuberotate {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg); /* Text bleed at 90º */
}
.cuberotateit {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s; /* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}
var degrees=0;
$("#btnflipflop").on('click', function (e) {
$("#questioncube").attr('class', "cuberotateit");
degrees = degrees + 90;
$('.cuberotateit').css('-webkit-transform', 'rotateX(' + degrees + 'deg)');
$('.cuberotateit').css('transform', 'rotateX(' + degrees + 'deg)');
});
<div id="questioncube" class="cube">
<div id="card1" class="flippety">
<h1>Flippity</h1>
</div>
<div id="card2" class="flop">
<h2>Flop</h2>
</div>
</div>
It is working correctly. You only have two of the four faces so what you're seeing is the back side of the two faces for the 3rd and 4th iterations. See this with backface-visibility: hidden; added.
Update
You need to set position: relative; on the .cube and position: absolute; width: 100%; height: 100%; on each of the faces. If you disable the transform and -webkit-transform on each of the faces, you'll see how the default position: static; affects their layout.
Here's a demo of the updated (and cleaned) code:
var degrees = 0;
$("#btnflipflop").on('click', function(e) {
degrees += 90;
$('#questioncube').css('-webkit-transform', 'rotateX(' + degrees + 'deg)');
$('#questioncube').css('transform', 'rotateX(' + degrees + 'deg)');
});
/* Container box to set the sides relative to */
.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
-webkit-transition: -webkit-transform .33s;
transition: transform .33s;
/* Animate the transform properties */
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/* <-NB */
position: relative;
}
.face1,
.face2,
.face3,
.face4 {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
height: 100px;
position: absolute;
width: 100%;
height: 100%;
}
.face1 {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
}
.face2 {
-webkit-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px);
}
.face3 {
-webkit-transform: rotateX(-180deg) translateZ(50px);
transform: rotateX(-180deg) translateZ(50px);
}
.face4 {
-webkit-transform: rotateX(-270deg) translateZ(50px);
transform: rotateX(-270deg) translateZ(50px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questioncube" class="cube">
<div id="card1" class="face1">
<h1>face1</h1>
</div>
<div id="card2" class="face2">
<h2>face2</h2>
</div>
<div id="card3" class="face3">
<h1>face3</h1>
</div>
<div id="card4" class="face4">
<h2>face4</h2>
</div>
</div>
<input id="btnflipflop" type="button" value="flipme" />
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;
}