Rotate CSS card with jquery and "this"

Rotate CSS card with jquery and "this" - javascript

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');
});

Related

Automatically close menu after link is clicked

At the moment, my navigation bar houses links to sections on the one page and doesn't have any links to other pages. When a link is clicked it automatically goes to the corresponding div on that page however, part of the target div is covered by the navigation bar which remains open until the close button is clicked.
My question is, is there a way to force the header to close once a link has been clicked?
HTML:
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>
CSS:
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
JS:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
});

add this jquery function in your js file :
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
here is snippet for understanding:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
});
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
#media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
#media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
#media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
#media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
#-ms-#keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li><a id="learnmore" href="#intro-block">Learn more</a></li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li>Learn more</li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li>View all</li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li>Store locator</li>
<li>Trade customer login</li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo">
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>

Why would this jQuery flip function bug with an image?

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>

Extent flip card function - Jquery

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>

Rotate CSS card on button click

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

Circle mask in css when zooming

I would like to use this zooming effect on a project of mine
http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html
I am using an image shaped as a circle (png) . I tried to make the containing div circular using border radius
.view {
width: 132px;
height: 132px;
margin-left: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-moz-border-radius: 66px;
-webkit-border-radius:66px;
-khtml-border-radius:66px;
border-radius: 66px;
cursor: default;
}
.view .mask,.view .content {
width: 132px;
height: 132px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
but when the image zoom, it shows rectangular margin. Any help on how to mask as a circle would be much appreciated!

.view: hover {
-moz-transform: scaleX(2);
-o-transform: scaleX(2);
-ms-transform: scaleX(2);
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
Here, the image/images with the classname view gets scaled 2X every time user hovers over the same.

Try use percentges (%) instead of pixels (px).
-moz-border-radius: 25%;
-webkit-border-radius:25%;
-khtml-border-radius:25%;
border-radius: 25%;

Develop Reference

JavaScript is the programming language of the Web.

Rotate CSS card with jquery and "this" - javascript

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'); });

Related

Automatically close menu after link is clicked

Why would this jQuery flip function bug with an image?

Extent flip card function - Jquery

Rotate CSS card on button click

Circle mask in css when zooming

Categories

Resources