Trigger that box whith a button?

Trigger that box whith a button? - javascript

Is it possible to trigger this rotate function with a click on a button? with :active it's possible to rotate it by clicking on the box. But you will need to keep the button pressed; is it possible to have some kind of toggle function on :active?
Is there any JavaScript to make a box flip?
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>

One approach is as below, with comments in the code to explain what's going on:
// here we use document.querySelector() to retrieve the first <button> element
// in the document; we then use EventTarget.addEventListener() to bind the
// anonymous Arrow function as the event-handler for the 'click' event:
document.querySelector('button').addEventListener('click', (e)=>{
// the Event Object ('e') is passed to the function body, we retrieve
// the element to which the function was bound (Event.currentTarget)
// and from there we use Element.closest() to find the closest '.card-wrap'
// element:
e.currentTarget.closest('.card-wrap')
// from there we use Element.querySelector() to find the first (if any)
// flip-box element within that ancestor:
.querySelector('.flip-box')
// and use the Element.classList API to toggle the 'active' class
// on that 'flip-box' element:
.classList.toggle('active');
});
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner,
/* added another selector, so that the
.flip-box-inner element within
.flip-box.active also rotates (is
rotated): */
.flip-box.active .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box, or click the button, below:</h3>
<!-- creating a wrapper element for each 'card' or 'flip-box' in order
to query the DOM more easily to find the relevant .flip-box from
a clicked <button>: -->
<div class="card-wrap">
<!-- insert a <button> with which the user can interact: -->
<button type="button">Toggle the card</button>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
</div>
JS Fiddle demo.
References:
HTML:
<button>.
JavaScript:
Arrow functions.
document.querySelector().
document.querySelectorAll().
Element.classList.
Element.closest().
Element.querySelector().
Element.querySelectorAll().
Event.
EventTarget.addEventListener().

This can be done without Javascript:
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.check:checked ~ .flip-box .flip-box-inner {
transform: rotateY(180deg);
background-color: black;
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
/* Here is the code I added */
a.click-button {
background: steelblue;
padding: 5px;
border-radius: 5px;
color: white;
margin-bottom: 20px;
display: inline-block;
}
input[type="checkbox" i] {
display: none;
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<!-- add a checkbox -->
<input type="checkbox" class="check" id="checked">
<label class="menu-btn" for="checked">
<a class="click-button">click here</a>
</label>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>

As long as you don't care about IE, classList is a well-supported option.
In your CSS file, change the following:
/* old: */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
/* new: */
.toggle .flip-box-inner {
transform: rotateY(180deg);
}
Then create a JavaScript file and add the following to it.
document
.getElementsByClassName('flip-box')[0]
.addEventListener('click', function () {
this.classList.toggle('toggle');
});
Then add the following <script> element to your html file.
<script src="<your JavaScript file name>.js"></script>
Here is the full code snippet:
document
.getElementsByClassName('flip-box')[0]
.addEventListener('click', function () {
this.classList.toggle('toggle');
});
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.toggle .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
Hope this helps.

define a generic .flip class that does a 180deg turn of any element it is assigned to with transform: rotateY(180deg).
add an original state transform: rotateY(0deg) to the class to be flipped (here .flip-box-inner showing the 'front').
Assign a Javascript click event listener to the parent to be clicked (here .flip-box).
have JS toggle the generic .flip class on/off.
UPDATE reply after OP comment
I replaced the snippet Javscript with jQuery syntax doing the same as the initial vanilla Javascript.
/*
jQuery alternative
*/
$('.flip-box').on('click', function() {
$('.flip-box-inner').toggleClass('flip');
});
/* DISABLED ORIGINAL JAVASCRIPT, no jQuery
// Reference to elements concerned
// This can be any parent/child combination
const el1 = document.querySelector(".flip-box"); // parent to be clicked
const el2 = document.querySelector(".flip-box-inner"); // child to be flipped
// Attach listener to parent, toggle child flip
el1.addEventListener('click', () => { el2.classList.toggle('flip') });
*/
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
/* ADDED, original state */
transform: rotateY(0deg);
}
/* CHANGED from '.flip-box:hover .flip-box-inner' to */
.flip { transform: rotateY(180deg) }
/* When toggled 'off' in JS '.flip-box-inner'
will revert back to original state */
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
<h1>3D Flip Box (Horizontal)</h1>
<h3>Hover over the box below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front Side</h2>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>

Related

JS: How to get multiple cards to flip on website?

Hi so I found this card flip animation https://codepen.io/desandro/pen/LmWozd and I decided to style it for my website. I intend to have a bunch of these cards (1 for each letter of the alphabet). However right now the code does not work for more than one card. I am not too familiar with JavaScript so I can't figure out why this code does not work. I have tried a few methods I found online but none of them seem to work either but they also didn't quiet apply to card flipping so I guess that might be part of the issue. Any help is appreciated!
Here's my code:
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
.scene {
width: 120px;
height: 100px;
margin: 40px 0;
perspective: 600px;
border-radius: 25px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
border-radius: 25px;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 200%;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
border-radius: 25px;
}
.card__face--front {
background: #C1C6C4;
}
.card__face--back {
background-size: contain;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
<div class="scene scene--card">
<div class="card" id="card-1">
<div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
<div class="card__face card__face--back" style="background-color: red"></div>
</div>
</div>
<div class="scene scene--card">
<div class="card" id="card-2">
<div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
<div class="card__face card__face--back" style="background-color: red">
</div>
<!-- color is a placeholder -->
</div>
</div>

Use querySelectorAll and a loop. querySelector returns the first element in hierarchical order. querySelectorAll returns an array of selected elements
var cards = document.querySelectorAll('.card');
for(let i = 0; i < cards.length; i++){
cards[i].addEventListener( 'click', function() {
cards[i].classList.toggle('is-flipped');
});
}
.scene {
width: 120px;
height: 100px;
margin: 40px 0;
perspective: 600px;
border-radius: 25px;
}
.card {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
border-radius: 25px;
}
.card.is-flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 200%;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
border-radius: 25px;
}
.card__face--front {
background: #C1C6C4;
}
.card__face--back {
background-size: contain;
background-repeat: no-repeat;
transform: rotateY(180deg);
}
<div class="scene scene--card">
<div class="card" id="card-1">
<div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
<div class="card__face card__face--back" style="background-color: red"></div>
</div>
</div>
<div class="scene scene--card">
<div class="card" id="card-2">
<div class="card__face card__face--front" style="background: #FFA894 !important;">A</div>
<div class="card__face card__face--back" style="background-color: red">
</div>
<!-- color is a placeholder -->
</div>
</div>

avoid mouse events on one div that is below another

I am trying to achieve the effect of "flip card". in the front, I have an element that has a click event, every time you click on it (.link). In the back there is nothing, but when I pass the cursor where the element with the .link class that is in the front, the click event is executed.
I would like to completely isolate the elements from the front part of the ones in the back part. how can I do it?
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">
<a class="front_button link">
text
</a>
</div>
<div class="card__face card__face--back">
back
</div>
</div>
</div>
.scene {
width: 200px;
height: 300px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
.front_button{
background:yellow;
height:200px;
width:100%;
position:absolute;
bottom:0px;
left:0px;
cursor: pointer;
}
.link{
border:1px solid red;
}
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
var link = document.querySelector('.link');
link.addEventListener( 'click', function() {
alert("link");
});
this is my code:
https://codepen.io/anon/pen/pOWONW
testing code from #Temani user

Remove the pointer events from the link when the card has the class is-flipped.
.card.is-flipped .front_button.link {
pointer-events: none;
}
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
var link = document.querySelector('.link');
link.addEventListener( 'click', function(e) {
e.stopPropagation();
alert("link");
});
body { font-family: sans-serif; }
.scene {
width: 200px;
height: 300px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
position: relative;
}
.card.is-flipped {
transform: rotateY(180deg);
}
.card.is-flipped .front_button.link {
pointer-events: none;
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateY(180deg);
}
.front_button{
background:yellow;
height:200px;
width:100%;
position:absolute;
bottom:0px;
left:0px;
cursor: pointer;
}
.link{
border:1px solid red;
}
<div class="scene scene--card">
<div class="card">
<div class="card__face card__face--front">
<a class="front_button link">
text
</a>
</div>
<div class="card__face card__face--back">
back
</div>
</div>
</div>
<p>Click card to flip.</p>

You can use the "pointer-events" (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) in your css for the is-flipped class.
.card.is-flipped {
transform: rotateY(180deg);
pointer-events: none;
}
This makes it ignore all mouse events.

Change the css style of multiple div on click?

I have e.x 3 boxes, the red one should have at start a bigger size then the others (through css). Now, when I click on the green or yellow box the red gets smaller size same as green or yellow had before clicking. And the clicked one gets the CSS Style (size) of the red one. I want to make it with JQuery but don't know how?
.r1, .r2, .r3{
width: 80px;
height: 80px;
margin: 40px;
float: left;
}
.r1{
background-color: red;
position: inherit;
transform: scaleY(1.2);
transform: scale(1.2);
transform-origin: center;
border: 2px solid #15dc6e;
}
.r2{
background-color: green;
}
.r3{
background-color: yellow;
}
<div class="content">
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
Fiddle: https://jsfiddle.net/cwx3ukra/16/

$(document).ready( () => {
$('.content div').click( e => {
// Remove zoom class from all elements
$('.content div').removeClass('big');
// Only apply to the clicked element
$(e.target).addClass('big');
});
})
.r1,
.r2,
.r3 {
width: 80px;
height: 80px;
margin: 40px;
float: left;
transform: scale(1);
transition: all 500ms ease-out;
}
.r1 {
background-color: red;
}
.r2 {
background-color: green;
}
.r3 {
background-color: yellow;
}
.big {
transform: scale(1.2);
border: 2px solid #15dc6e;
transform-origin: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="r1 big"></div>
<div class="r2"></div>
<div class="r3"></div>
</div>
Working JSFiddle Here
You can achieve a smooth transition using pure CSS:
.r1,
.r2,
.r3 {
width: 80px;
height: 80px;
margin: 40px;
float: left;
transform: scale(1);
transition: all 500ms ease-out;
}
.big {
transform: scale(1.2);
border: 2px solid #15dc6e;
transform-origin: center;
}
The transition property will automatically transition from one rule to another. In this example, it transitions from transform: scale(1) to transform: scale(1.2).

Try this out:
Codepen: https://codepen.io/samandalso/pen/qKrLLM
$(function() {
$('.content div').on('click', function(){
$('.content div').not($(this)).removeClass('scaled');
$(this).toggleClass('scaled');
});
});

flip box height of back side, also doesnot work on IE [duplicate]

This question already has answers here:
CSS flip code won't work in IE11
(2 answers)
Closed 7 years ago.
I am trying to flip div/box, it works well. but the problem is height of back side.
because it is higher than height of front side. so flip div always push down to next element (eg: Container2). and there is always space between flip div and next elements.
In addition, when I run this code on IE, its flips the div but don't show the right content. just try my demo in IE and Chrome. you will find the issue.
also I have attached the image. I hope they will help to understand the issue.
First State want to manage this height/space from both content and container2
2nd State after clicked on edit link
I hope I have explained enough.
Thank you...
demo code
HTML
<br>
<br>
<br>
<br>
<div class="container">
<div class="flip">
<div class="moveOnchange card">
<div class="face front bgGrey">
<div class=" portlet portletTodelete ">
<div class="portlet-header"> <span class=" "> Front Side </span>
<div class="dropdown pull-right ">
<span class="pull-right ">
<span class="flipControl" >Edit <span class="glyphicon glyphicon-pencil pull-right flipLink"> </span> </span>
</span>
</div>
<!-- portlet-content -->
</div>
<!-- portlet-header -->
</div>
<div class="portlet-content">content</div>
<!-- portlet- -->
</div>
<!-- moveOnchange-->
<div class="face back">
<div class="inner">
<div class="portlet">
<div class="flipForm bgGrey"> Back Side
<ul class="list-inline pull-right ">
<li class="flipControl"> <span class="pull- right glyphicon glyphicon-floppy-disk gi-1x opacity7 "></span>
</li>
</ul>
<hr class="hrflipForm">
</div>
<!-- Header Closed -->
<div class="portlet-content">
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text
<br>text</div>
<!--- Portlet content -->
</div>
</div>
</div>
</div>
</div>
<div class="container2 container border">container 2</div>
</div>
CSS
.flipForm {
padding:5px;
}
.bgGrey {
background: #efefef;
}
.portlet {
border:solid 1px red;
padding: 10px;
}
.portlet-header {
padding: 0.2em 0.3em;
/*margin-bottom: 0.5em;*/
position: relative;
}
.portlet-content {
border:blue 1px solid;
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 0 10px 0;
height: 50px;
}
/************* Flip and show Form. ************/
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
height: 100%;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
height: auto;
}
.flip .card .back {
height: auto;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner {
height: auto !important;
margin: 0px !important;
}
.container2 {
border:solid 1px green;
height:50px;
padding:5px;
}

Set min-height and margin-bottom.
http://jsfiddle.net/9w26kzc6/6/
.portlet-content {
border:blue 1px solid;
padding: 0.4em;
min-height: 400px;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
min-height: 450px;
margin-bottom: 30px;
}
And add this:
.flip .card .face {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
height: 100%;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
And add background-color:
.flip .card .back {
height: auto;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
background-color: #fff;
}

I am not sure this will work, but I think it would:
Css:
.flipForm {
padding:5px;
}
.bgGrey {
background: #efefef;
}
.portlet {
border:solid 1px red;
padding: 5px;
}
.portlet-header {
padding: 0.2em 0.3em;
/*margin-bottom: 0.5em;*/
position: relative;
}
.portlet-content {
border:blue 1px solid;
padding: 0.4em;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 0 10px 0;
height: 50px;
}
/************* Flip and show Form. ************/
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
height: 100%;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
height: auto;
}
.flip .card .back {
height: auto;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner {
height: auto !important;
margin: 0px !important;
}
.container2 {
border:solid 1px green;
height:35px;
padding:5px;
}
PLease see my demo page
DEMO

Jquery adding class to single element

Putting together a simple jquery flip on click and return when mouse leaves the div container. Currently the class addition on click is being applied to all elements instead of only the one clicked.
JSFiddle
$('.flip').click(function(){
$(this).find('.card').addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 200px;
height: 100px;
position: relative;
margin: 20px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 100px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">
<div class="card 1">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
<br>
<div class="card 2">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>

You added your click handler to the element <div class="flip">. In your click handler, you find all the child elements of the div that was clicked with class "card" and change them.
What if you register your click handler only on the elements with class card?
$('.flip .card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});

You need to add your click handler to the card class instead of the parent <div>; otherwise, this references the parent and will find all .card children.
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
There's a running snippet below where you can see it in action.
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 200px;
height: 100px;
position: relative;
margin: 20px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 100px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">
<div class="card 1">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
<br>
<div class="card 2">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>

Your selectors were at the parent div level, here you go:
http://jsfiddle.net/vrnft584/
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});

Bind the click event to the card and not the flip:
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 200px;
height: 100px;
position: relative;
margin: 20px auto;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 100px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip">
<div class="card 1">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
<br>
<div class="card 2">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>

it's simple just add the event to the element itself not the parent element
$('.flip .card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});

You just need to apply the the class to the clicked card you were applying it to the containing div. There you go:
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});

We Keep Coding

JavaScript is the programming language of the Web.

Trigger that box whith a button? - javascript

Related

JS: How to get multiple cards to flip on website?

avoid mouse events on one div that is below another

Change the css style of multiple div on click?

flip box height of back side, also doesnot work on IE [duplicate]

Jquery adding class to single element

Categories

Resources