We Keep Coding

Trigger that box whith a button?

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>

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>

How to delay jquery hide on mousedown until CSS animation completes?

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>

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.

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