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>
Related
I am really new in web development. So I really need some guides, tips and tricks on how to do coding. So here's the details...
After I fill up my Yes and No checkboxes forms on each steps of a multi form steps, I want to have a grade on each steps. for example Leadership Development has a 12 Yes and 8 No and the system will calculate it's percentage from
(This is the pie chart) & (This is the accordion)
0 to 49% Your leadership skills will need to be improved for your business to at least
survive.
50% to 70% You have middling leadership skills that could probably be sufficient for your
business to survive.
70% to 100% You have very good leadership skills to help your organization grow.
How to show it's pie chart with percentage inside of it and beside the pie is an accordion which will also give details from the ratings.
Please I really need help on this one.
Here's the progress bar I made for an example
<style>
#output .accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
font-size: 35px;
margin-top: 152px;
}
#output .active, .accordion:hover {
background-color: #ccc;
}
#output .panel {
padding: 0 18px;
background-color: #abaaaa;
max-height: 0;
color: black;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#output .accordion:after {
content: '\002B';
color: #d02a3e;
font-weight: bold;
float: right;
margin-left: 5px;
}
#output .active:after {
content: "\2212";
}
.progress-pie-chart {
width: 128px;
height: 128px;
border-radius: 50%;
background-color: #ececec;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: orange;
}
.progress-pie-chart.red .ppc-progress-fill {
background: red;
}
.progress-pie-chart.red span {
color: red;
}
.progress-pie-chart.orange .ppc-progress-fill {
background: orange;
}
.progress-pie-chart.orange span {
color: orange;
}
.progress-pie-chart.green.gt-50,
.progress-pie-chart.green .ppc-progress-fill {
background: green;
}
.progress-pie-chart.green span {
color: green;
}
.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 128px, 128px, 64px);
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 64px, 128px, 0);
transform: rotate(60deg);
}
.gt-50 .ppc-progress {
clip: rect(0, 64px, 128px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip: rect(0, 128px, 128px, 64px);
background: #E5E5E5;
}
.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 111.30435px/2);
top: calc(50% - 111.30435px/2);
width: 111.30435px;
height: 111.30435px;
background: #fff;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 18px;
}
.ppc-percents span cite {
font-size: 35px;
}
.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}
.progress-pie-chart {
margin: 0 auto 0;
margin-top: 115px;
}
</style>
<div class="row">
<div class="col-lg-6">
<div class="progress-pie-chart" data-percent="24">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="60">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="95">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
</div>
<div class="col-lg-6 pt-4 pt-lg-0 align-items-stretch">
<button class="accordion">Leadership Development System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Marketing System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Financial System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
I have a React-based Cordova app, and ever since changing to WKWebview, I have noticed that occasionally my root element will get selected when I click on my message container.
It looks like this:
<div id="root">
<div>
<header>
<div class="linkback">
<div class="triangle"></div>
</div>
</header>
<div class="switch-wrapper">
<div style="opacity: 1;">
<div>
<div class="chat-title">Name</div>
<div id="messages-container" style="transform: translate3d(0px, 0px, 0px);">
<div id="messages" style="transform: translate3d(0px, 0px, 0px);">
<div class="message right"><span>Test</span></div>
<div class="message right"><span>Test2</span></div>
<div class="message right"><span>Test3</span></div>
<div class="message right"><span>Test4</span></div>
<div class="message right"><span>Test5</span></div>
<div class="message right"><span>Test6</span></div>
...
<div class="bottom-scroll" id="bottom-scroll"></div>
</div>
</div>
<div class="msginput">
<div class="inner-keyboard">
<textarea placeholder="Message..." class="textareainput" name="msginput" rows="1" style="max-height: 54px; overflow: hidden; word-wrap: break-word; height: 22px;"></textarea>
<div class="sendbutton">Send</div>
</div>
</div>
</div>
</div>
</div>
<div class="Toastify"></div>
</div>
</div>
And my CSS is like this:
#messages {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
height: 75vh;
padding-bottom: 0em;
z-index: 100;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
cursor: pointer;
}
.message {
width: 100%;
padding: 4px 0;
}
.right {
text-align: right;
}
.message span {
width: 40%;
padding: 8px 10px;
border-radius: 12px;
display: inline-block;
text-align: left;
}
.message div {
padding: 6px 10px;
display: block;
margin: 0 20px 8px 20px;
color: #bbbbbb;
font-size: 1em;
}
.message.left span {
background-color: #cccccc;
margin-left: 2em;
}
.message.right span {
color: #ffffff;
margin-right: 2em;
background-color: #536dfe;
}
#messages-container {
height: 100vh;
position: fixed;
width: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 99;
cursor: pointer;
}
When I select the element (#messages) properly somehow, it works as intended. Otherwise I just pull the parent divs, either #root or #root > div
How do I scroll with #messages without accidentally moving anything else?
I only noticed this happening after updating my webview to WKWebview.
Trying to put a menu together, and having some trouble with one behavior.
Have a set of sub-menu divs hidden behind the main menu divs. Upon click, the sub-menu is shown and animates into view.
I'm able to see the animation when the sub-menus are shown, but not when when they toggle back to hidden. I've tried a few different things to get it to behave the way I want, but no joy.
Here's the code:
$(document).ready(function() {
$(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) {
$(this).toggleClass("active", event.type === 'mouseenter');
});
$('.menu').hide();
$('.circle').on('mousedown touchstart', function() {
$('.circle').toggleClass('hover-effect');
$(this).toggleClass('selected');
$('.circle').not(this).removeClass('selected');
if ($(this).hasClass('selected')) {
$('.circle').not(this).addClass('behind');
$(this).prev().show('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel');
$(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel');
}
else {
$('.circle').removeClass('behind');
$('.circle').prev().hide('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel');
$(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel');
}
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}
.grid {
display: flex;
flex-wrap: wrap;
width: 90%;
height: 450px;
margin: auto;
overflow: hidden;
padding: 10px 10px;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
}
.cell::before {
padding-bottom: 100%;
display: block;
content: '';
}
.menu {
position: relative;
top: 100px;
left: 100px;
}
.menu-item {
width: 60px;
height: 60px;
background-color: dimGray;
border-radius: 50%;
position: absolute;
color: white;
text-align: center;
line-height: 70px;
z-index: 19;
}
.menu-item a {
color: white;
transition: 0.35s;
}
.menu-item a:hover { color: black; }
.menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.menu1 .menu-item1-sel { transform: translate(0px, 125px); }
.menu1 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; }
.menu2 .menu-item1-sel { transform: translate(0px, 125px); }
.menu2 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item-desel { transform: none; }
.circle {
position: relative;
background: #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
margin: 0 auto 1em;
transition: all 0.3s;
z-index: 20;
cursor: pointer;
opacity: 1;
}
.active { transform: scale(1.1); }
.selected {
background: red;
z-index: 20;
}
.behind {
opacity: 0.1;
z-index: 18;
cursor: default;
pointer-events: none;
}
.caption {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="grid">
<div class="cell col1">
<div class="inner">
<div class="menu menu1">
<div class="menu-item menu-item1"><i class="fa fa-user fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-graduation-cap fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 1</h2>
<h3>Subtitle 1</h3>
</div>
</div>
</div>
</div>
<div class="cell col1">
<div class="inner">
<div class="menu menu2">
<div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 2</h2>
<h3>Subtitle 2</h3>
</div>
</div>
</div>
</div>
</div>
And here's the fiddle: JSfiddle
Any help would be greatly appreciated! Thanks, and have a great day!
Add delay when hiding the div. Div should perform the effect first before hiding use setTimeout
Executes a function, after waiting a specified number of milliseconds.
$(document).ready(function() {
$(document).on('mouseenter mouseleave', '.circle.hover-effect', function (event) {
$(this).toggleClass("active", event.type === 'mouseenter');
});
$('.menu').hide();
$('.circle').on('mousedown touchstart', function() {
$('.circle').toggleClass('hover-effect');
$(this).toggleClass('selected');
$('.circle').not(this).removeClass('selected');
if ($(this).hasClass('selected')) {
$('.circle').not(this).addClass('behind');
$(this).prev().show('fast');
$(this).prev().find('.menu-item1').removeClass('menu-item-desel').addClass('menu-item1-sel');
$(this).prev().find('.menu-item2').removeClass('menu-item-desel').addClass('menu-item2-sel');
}
else {
$('.circle').removeClass('behind');
$(this).prev().find('.menu-item1').removeClass('menu-item1-sel').addClass('menu-item-desel');
$(this).prev().find('.menu-item2').removeClass('menu-item2-sel').addClass('menu-item-desel');
setTimeout(function(){ $('.circle').prev().hide('fast'); }, 1000);
}
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: -ms-linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* IE10 */
background: linear-gradient(90deg, #16222A 10%, #3A6073 90%); /* W3C */
}
.grid {
display: flex;
flex-wrap: wrap;
width: 90%;
height: 450px;
margin: auto;
overflow: hidden;
padding: 10px 10px;
}
.cell {
flex-basis: 33.3%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid transparent;
}
.cell::before {
padding-bottom: 100%;
display: block;
content: '';
}
.menu {
position: relative;
top: 100px;
left: 100px;
}
.menu-item {
width: 60px;
height: 60px;
background-color: dimGray;
border-radius: 50%;
position: absolute;
color: white;
text-align: center;
line-height: 70px;
z-index: 19;
}
.menu-item a {
color: white;
transition: 0.35s;
}
.menu-item a:hover { color: black; }
.menu-item1 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.menu1 .menu-item1-sel { transform: translate(0px, 125px); }
.menu1 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item2 { transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; }
.menu2 .menu-item1-sel { transform: translate(0px, 125px); }
.menu2 .menu-item2-sel { transform: translate(60px, 105px); }
.menu-item-desel { transform: none; }
.circle {
position: relative;
background: #ccc;
border-radius: 50%;
width: 200px;
height: 200px;
margin: 0 auto 1em;
transition: all 0.3s;
z-index: 20;
cursor: pointer;
opacity: 1;
}
.active { transform: scale(1.1); }
.selected {
background: red;
z-index: 20;
}
.behind {
opacity: 0.1;
z-index: 18;
cursor: default;
pointer-events: none;
}
.caption {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="grid">
<div class="cell col1">
<div class="inner">
<div class="menu menu1">
<div class="menu-item menu-item1"><i class="fa fa-user fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-graduation-cap fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 1</h2>
<h3>Subtitle 1</h3>
</div>
</div>
</div>
</div>
<div class="cell col1">
<div class="inner">
<div class="menu menu2">
<div class="menu-item menu-item1"><i class="fa fa-envelope-o fa-2x"></i></div>
<div class="menu-item menu-item2"><i class="fa fa-code fa-2x"></i></div>
</div>
<div class="circle hover-effect">
<div class="caption">
<h2>Header 2</h2>
<h3>Subtitle 2</h3>
</div>
</div>
</div>
</div>
</div>
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.
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;
});