I have this in CSS
function focusCard(element) {
element.getElementsByClassName("front")[0].classList.toggle("show");
element.getElementsByClassName("back")[0].classList.toggle("show");
}
.box {
cursor: pointer;
width: 270px;
height: 170px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.front {
position: absolute;
width: 270px;
height: 170px;
background-color: #778da9;
transform: perspective(800px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 0.5s;
overflow: hidden;
}
.box:hover .front,
.show {
transform: rotateX(180deg);
}
.back {
position: absolute;
width: 270px;
height: 170px;
background: #415a77;
transform: perspective(800px) rotateY(0deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 0.5s;
flex-direction: column;
transform: rotateX(180deg);
}
.box:hover .back,
.show {
transform: rotateX(0deg);
}
<div class="container">
<div class="questions">
<div class="">
<div class="box" onclick="focusCard(this)">
<div class="front center">
<h2>Front #1</h2>
</div>
<div class="back center">
<p>Back #2</p>
</div>
</div>
</div>
</div>
</div>
On desktop devices works fine but on mobile devices doesnt work properly.
On mobile devices, it only works when I click on the front. Back appears, but does not go back to front when you click back. can anyone help me this problem?
Thanks for all tips & advice
The problem you're having has nothing to do with mobile event registration. The mobile can also handle click event without problems. It works fine for pc mainly because of :hover pseudo class.
It would make more sense that putting .show on .box instead of its children. You may also consider putting perspective on .box.
On top of that, you should add :hover only for a device that has a cursor, since after tapping the element on mobile, the :hover kept activated until you tap somewhere else.
/* make hover only works for pc */
#media (hover: hover) {
.box:hover .front {
transform: rotateX(180deg);
}
.box:hover .back {
transform: rotateX(0deg);
}
}
Here's a cleaned-up version for what you might want to achieve:
function focusCard(element) {
element.classList.toggle("show");
}
.box {
cursor: pointer;
width: 270px;
height: 170px;
perspective: 800px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.front {
position: absolute;
width: 270px;
height: 170px;
background-color: #778da9;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 0.5s;
overflow: hidden;
}
.back {
position: absolute;
width: 270px;
height: 170px;
background: #415a77;
transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: all 0.5s;
flex-direction: column;
transform: rotateX(-180deg);
}
/* make hover only works for pc */
#media (hover: hover) {
.box:hover .front {
transform: rotateX(180deg);
}
.box:hover .back {
transform: rotateX(0deg);
}
}
.show .front {
transform: rotateX(180deg);
}
.show .back{
transform: rotateX(0deg);
}
<div class="container">
<div class="questions">
<div class="">
<div class="box" onclick="focusCard(this)">
<div class="front center">
<h2>Front #1</h2>
</div>
<div class="back center">
<p>Back #2</p>
</div>
</div>
</div>
</div>
</div>
Related
This question already has answers here:
How to use jQuery to wait for the end of CSS3 transitions?
(6 answers)
Closed 5 years ago.
I need to wait (prevent) until this animation (flip card) is finished, if you hover again while animation is running it triggers again and restart the animation.
1) I want leave finish the currently animation even you hover again or you hover out. This is what I have tried so far:
if(!$(this).find(".card").is(':animated')){
$(this).find(".card").toggleClass('flipped')
}
And this:
$(":animated").promise().done(function() {
$(this).find(".card").toggleClass('flipped')
});
2) If you re-hover flipped card (blue part) and you leave the cursor inside dont flip it again to the red part while cursor is inside. I tried this canceling setTimeout with clearTimeout but still doesnt work:
$(document).ready(function () {
var funct = 0
$(".container").hover(function () {
clearTimeout(funct);
$(this).find(".card").addClass('flipped')
}, function () {
var val = $(this).find(".card")
var funct = setTimeout(function () {
val.removeClass('flipped')
}, 2000)
})
})
Note: I use setTimeOut function because I need reverse flip card 2 seconds after you hover out and I want keep it.
Here is the working snippet code:
$(document).ready(function () {
$(".container").hover(function(){
$(this).find(".card").toggleClass('flipped')
}, function(){
var val = $(this).find(".card")
setTimeout(function(){
val.toggleClass('flipped')
}, 2000)
})
})
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.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: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front"><p>Test</p></div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Run a conditional check first to determine if the trigger class flipped has already been added to the element in question.
This will imply that the animation is still running or currently active (if the class flipped is already present).
if (!$(this).find(".card").hasClass('flipped')) {
$(this).find(".card").toggleClass('flipped')
}
$(document).ready(function() {
$(".container").hover(function() {
if (!$(this).find(".card").hasClass('flipped')) {
$(this).find(".card").toggleClass('flipped')
}
}, function() {
var val = $(this).find(".card")
setTimeout(function() {
val.removeClass('flipped')
}, 1000);
});
});
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.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: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Then replace the .toggleClass() method with the .removeClass() method in your setTimeout() function for better "fool-proofing" and more reliable application during intended events - so that this class is never unintentionally added when it should simply be removed.
Edit
To address the issue you've pointed out in the comments, see what the embedded code snippet below demonstrates.
Essentially, a class is added as a flag to check against during specific events at specific times.
$(document).ready(function() {
$('.container').hover(function() {
if (!$(this).find('.card').hasClass('flipped')) {
$(this).find('.card').toggleClass('flipped')
}
$(this).find('.card').addClass('hovered'); /* add class - this will be our flag we'll check against */
}, function() {
var val = $(this).find('.card');
$(this).find('.card').removeClass('hovered'); /* remove class - if we refrain from hovering over again, the condition block below will return true and run the code within */
setTimeout(function() {
if(!val.hasClass('hovered')) {
val.removeClass('flipped')
}
}, 1000);
});
});
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.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: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
I'm looking for information.
Does someone ever heard about this kinda add?
I'm trying programming an add which opening itself when you click on it, but I'm stuck.
I found a solution if you wanna an opening style add like 2 distributed parts but not for 3 or more side, so if it's possible, so someone can help me find out how can I solve this problem?
This is the html file
I tried the 3rd "distribution" but that stucked under the 2nd so I deleted that part of the code.
.cards {
width: 300px;
height: 600px;
margin: auto auto;
}
.card-toggle {
display: none;
}
.card {
display: block;
width: 180px;
height: 180px;
position: relative;
-webkit-perspective: 900;
margin: auto auto;
cursor: pointer;
}
.card:hover .face {
-webkit-transition: all 0.3s ease-out;
margin: auto auto;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
}
.front {
-webkit-transform: rotateY(0deg);
z-index: auto;
-webkit-backface-visibility: hidden;
}
.inner-left {
-webkit-transform: rotateY(-10deg);
z-index: 2;
}
.inner-left>img {
-webkit-transform: rotateY(180deg);
}
.inner-right {
-webkit-transform: rotateY(0deg);
z-index: 1;
}
.card:hover .front,
.card:hover .inner-left {
-webkit-transform: rotateY(-15deg);
}
.card-toggle:checked+.card .front,
.card-toggle:checked+.card .inner-left {
-webkit-transform: rotateY(-180deg);
}
.card-toggle:checked+.card .inner-right {
-webkit-transform: rotateY(0deg);
}
<div class='cards'>
<input type="checkbox" id="card-toggle" class="card-toggle" value="selected">
<label class='card' for="card-toggle">
<div class='front face'>
Font view of the advertisement.
</div>
<div class="inner-left face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
<div class="inner-right face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
</label>
</div>
This version makes it open more like a book:
.cards {
width: 300px;
height: 600px;
margin: auto auto;
}
.card-toggle {
display: none;
}
.card {
display: block;
width: 180px;
height: 180px;
position: relative;
perspective: 900;
margin: auto auto;
cursor: pointer;
}
.card:hover .face {
transition: all 0.3s ease-out;
margin: auto auto;
}
.face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: visible;
-webkit-transition: all 0.5s ease-out;
-webkit-transform-origin: 0 0;
}
.front {
/*-webkit-transform: rotateY(180deg);*/
z-index: auto;
-webkit-backface-visibility: hidden;
}
.inner-left {
/*-webkit-transform: rotateY(-180deg);*/
z-index: 2;
}
.inner-left>img {
/*-webkit-transform: rotateY(180deg);*/
}
.inner-right {
/*-webkit-transform: rotateY(180deg);*/
z-index: 1;
}
.card:hover .front,
.card:hover .inner-left {
transform: rotateY(180deg);
}
.card-toggle:checked+.card .front,
.card-toggle:checked+.card .inner-left {
transform: rotateY(180deg);
}
.card-toggle:checked+.card .inner-right {
transform: rotateY(-180deg);
}
<div class='cards'>
<input type="checkbox" id="card-toggle" class="card-toggle" value="selected">
<label class='card' for="card-toggle">
<div class='front face'>
Front view of the advertisement.
</div>
<div class="inner-left face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
<div class="inner-right face">
<img class="inner-left" width=300px height="600px" src='http://picanimal.com/wp-content/uploads/2017/07/cats-cat-play-hide-cute-pictures-hd-1366x768.jpg' />
</div>
</label>
</div>
here is my CodePen demo or you can run the snippet below.
In the original script, the front face of the cube is a slider, and when I hover my 'info-box' it shows the right side of it with some description (<p> an <a>).
The expected behavior is that as long as the user stays on the description, the element keeps having the .hover class given in the $('#info-box').hover() function
All was working fine until i tested it on chrome :(...
From what I understand, it seems to fires multiples mouseOver/mouseOut events when hovering and it messes and flicker everything up.
Should I use a setTimeout ?
$('.slide-info').click(function() {
$(this).parent().toggleClass('hover');
})
.hover(function() {
$(this).parent().addClass('hover');
},
function() {
$(this).parent().removeClass('hover');
});
$('.right').hover(function() {
$(this).parent().parent().addClass('hover');
},
function() {
$(this).parent().parent().removeClass('hover');
});
h1 {
text-align: center;
}
body {
background-color: #333;
}
.Cube-container {
width: 500px;
top: 20px;
height: 150px;
perspective: 1000px;
position: relative;
margin-right: auto;
margin-left: auto;
transform-origin: 50% 50% -250px;
}
.Cube {
transition: all .5s ease-out;
transform-style: preserve-3d;
backface-visibility:hidden;
}
.front,
.right {
height: 150%;
text-align: center;
padding-top: 10px;
backface-visibility: hidden;
}
.Cube-container.hover .Cube {
transform: rotateY(90deg);
transform-origin: 50% 50% -250px;
}
.front {
transform-style: preserve-3d;
transition: all .5s ease-out;
background-color: #fc8;
position: relative;
}
.right {
background-color: #8cf;
position: absolute;
top: 0px;
left: 0px;
height: calc(100% - 10px);
/* because it takes in account the padding, i guess we can do some box-sizing: border box to avoid that...*/
width: 100%;
transform: rotateY(-90deg) translateX(-100%);
transform-origin: 0 0;
}
.ol
/* OverLay */
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide-info {
width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 15px;
cursor: pointer;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Cube-container">
<div class="ol Cube">
<div class="ol right">
<h2>Right side</h2>
<p>While we hover that side, parent element keeps having the .hover class, making it visible</p>
</div>
<div class="ol front">
<h2>Front</h2>
<p>Hover the info box please :)</p>
</div>
</div>
<div class="ol slide-info">
<h3>INFO</h3>
</div>
</div>http://stackoverflow.com/questions/ask#
The problem was that I used backface-visibility: hidden on parent element. (see commented line in snippet)
Crazy but that solved my problem on Chrome browser, now everything works fine.
$('.slide-info').click(function() {
$(this).parent().toggleClass('hover');
})
.hover(function() {
$(this).parent().addClass('hover');
},
function() {
$(this).parent().removeClass('hover');
});
$('.right').hover(function() {
$(this).parent().parent().addClass('hover');
},
function() {
$(this).parent().parent().removeClass('hover');
});
h1 {
text-align: center;
}
body {
background-color: #333;
}
.Cube-container {
width: 500px;
top: 20px;
height: 150px;
perspective: 1000px;
position: relative;
margin-right: auto;
margin-left: auto;
transform-origin: 50% 50% -250px;
}
.Cube {
transition: all .5s ease-out;
transform-style: preserve-3d;
/*backface-visibility:hidden; <-- Causing the problem */
}
.front,
.right {
height: 150%;
text-align: center;
padding-top: 10px;
backface-visibility: hidden;
}
.Cube-container.hover .Cube {
transform: rotateY(90deg);
transform-origin: 50% 50% -250px;
}
.front {
transform-style: preserve-3d;
transition: all .5s ease-out;
background-color: #fc8;
position: relative;
}
.right {
background-color: #8cf;
position: absolute;
top: 0px;
left: 0px;
height: calc(100% - 10px);
/* because it takes in account the padding, i guess we can do some box-sizing: border box to avoid that...*/
width: 100%;
transform: rotateY(-90deg) translateX(-100%);
transform-origin: 0 0;
}
.ol
/* OverLay */
{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide-info {
width: auto;
height: auto;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 15px;
cursor: pointer;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Cube-container">
<div class="ol Cube">
<div class="ol right">
<h2>Right side</h2>
<p>While we hover that side, parent element keeps having the .hover class, making it visible</p>
</div>
<div class="ol front">
<h2>Front</h2>
<p>Hover the info box please :)</p>
</div>
</div>
<div class="ol slide-info">
<h3>INFO</h3>
</div>
</div>http://stackoverflow.com/questions/ask#
I'm trying to have a collection of cards/divs within a container. When a card/div is clicked, it should flip horizontally and expand to take up the entire space within the container (basically changing the size of the card/div to 100% x 100% when clicked). I'm unsure if this is possible or not, as all of the examples that I've seen out there typically involve the card/div remaining the same size.
Here's the fiddle I tried working with, but I can't get the basic flipping functionality: https://jsfiddle.net/4dazznb5/
$('.card').click(function(){
$(this).addClass('flipped').mouseleave(function(){
$(this).removeClass('flipped');
});
return false;
});
.cards {
width: 100%;
height: 100%;
background: gray;
padding: 10px;
box-sizing: border-box;
position: relative;
-webkit-perspective: 800;
perspective: 800;
}
.cards .card {
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
background: white;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
}
.card {
width: 100%;
background: lightgray;
padding: 6px;
margin: 10px 0;
box-sizing: border-box;
cursor: pointer;
position: relative;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.card:nth-of-type(1) {
margin-top: 0;
}
.card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card">
<div class="face front">Card 1 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 2 Front</div>
<div class="face back">Card 2 Back</div>
</div>
<div class="card">
<div class="face front">Card 3 Front</div>
<div class="face back">Card 3 Back</div>
</div>
</div>
</div>
Since Tambo's backfaces were better (allowing html content), I made this mix with our answers (tested with success on Mozilla and Chrome):
$('.card').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".face" ).addClass( 'off' );
$( this ).children( ".face" ).removeClass( 'off' );
$( this ).parent( ".cards" ).addClass( 'big' );
$( this ).addClass('flipped');
} else {
$( ".face" ).removeClass( 'off' );
$( ".cards" ).removeClass( 'big' );
$( this ).removeClass('flipped');
}
});
body {
height:100vh;
width:100vw;
margin:0px;
}
#container {
position: relative;
background: skyblue;
height:100%;
width:60%;
overflow: hidden;
margin:auto;
}
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
}
.cards {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
width: 80%;
height: 20%;
position: absolute;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
margin-left: 10%;
margin-right: 10%;
}
.cards .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
z-index: 100;
}
.cards .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
.cards .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 2em;
font-family: arial, sans-serif;
text-align: center;
-webkit-transition: all 0.5s; /* Safari */
transition: all 0.5s;
}
.cards .card .front {
position: absolute;
background: tomato;
z-index: 1;
}
.cards .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background: gold;
}
.cards .card .front,
.cards .card .back{
cursor: pointer;
}
.big {
height:100%;
width:100%;
top: 0% !important;
margin-left: 0%;
margin-right: 0%;
z-index:100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class=cards style="top:0px">
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>
<div class=cards style="top:25%">
<div class=card>
<div class="face front">
Card 2 Front
</div>
<div class="face back">
Card 2 Back
</div>
</div>
</div>
<div class=cards style="top:50%">
<div class=card>
<div class="face front">
Card 3 Front
</div>
<div class="face back">
Card 3 Back
</div>
</div>
</div>
<div class=cards style="top:75%">
<div class=card>
<div class="face front">
Card 4 Front
</div>
<div class="face back">
Card 4 Back
</div>
</div>
</div>
</div>
Just add !important to the new 'flipped' class attributes overwrites the old ones. The javascript line $( ".item" ).not( this ).addClass( 'off' ) removes the other cards when one is selected. The absolute position let everything on its place. The active card have a higher z-index to ensures that other cards will not activate the 'mouseleave' trigger. UPDATE: finally working 100% on Mozilla and Chrome. ps: a click opens the card and another click closes it.
$('.item').click(function(){
if (!$(this).hasClass("flipped")) {
$( ".item" ).not( this ).addClass( 'off' );
$( this ).addClass('flipped');
} else {
$( ".item" ).removeClass( 'off' );
$( this ).removeClass('flipped');
}
});
.off {
color: rgba(0, 0, 0, 0.0) !important;
background: rgba(230, 230, 250, 0.0) !important;
}
.cards {
width: 100%;
height: 100%;
background: lavender;
position: relative;
-webkit-perspective: 900px;
perspective: 900px;
}
.flipped {
top: 0% !important;
height: 100% !important;
width: 100% !important;
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
color: rgba(0, 0, 0, 0.0);
z-index:100;
-webkit-transform-style: preserve-3d;
background: tomato;
}
.flipped:after {
content: 'More text on here.';
right: 0px;
bottom: 0px;
position: absolute;
top: 0px;
left: 0px;
color: rgba(0, 0, 0, 1.0);
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
background: gold;
}
.card {
height: 22%;
width: 100%;
box-sizing: border-box;
cursor: pointer;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
display: block;
position: absolute;
background: tomato;
}
.aaa {
top:0%;
}
.bbb {
top:26%;
}
.ccc {
top:52%;
}
.ddd {
top:78%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width: 400px; height: 600px;">
<div class="cards">
<div class="card item aaa">
<div class="face front">Some text on here.</div>
</div>
<div class="card item bbb">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ccc">
<div class="face front">Some text on here.</div>
</div>
<div class="card item ddd">
<div class="face front">Some text on here.</div>
</div>
</div>
</div>
Just play with Element.classList and CSS transitions
// Function to flip the card and expand the content
function flipMe() {
console.log(this.innerHTML);
var card = this.querySelector('.card');
card.classList.add('flipped');
// this handler will be executed every time the cursor is moved off the card
card.addEventListener("mouseout", function( event ) {
this.classList.remove('flipped');
}, false);
}
// Define our variables
var cardWrapper = document.querySelector('.cardWrapper');
cardWrapper.addEventListener("click", flipMe, false);
:root {
background: #CAC8CC;
}
.cardWrapper {
-webkit-perspective: 800;
-moz-perspective: 800;
perspective: 800;
width: 400px;
height: 300px;
position: relative;
margin: 100px auto;
}
.cardWrapper .card.flipped {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
height: 100%;
}
.cardWrapper .card {
width: 100%;
height: 100px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
}
.cardWrapper .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden ;
-moz-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
font-size: 4em;
text-align: center;
}
.cardWrapper .card .front {
position: absolute;
background: black;
color: white;
z-index: 1;
}
.cardWrapper .card .back {
-webkit-transform: rotatex(-180deg);
-moz-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background-color: #0095ff;
}
.cardWrapper .card .front,
.cardWrapper .card .back{
cursor: pointer;
}
<div class=cardWrapper>
<div class=card>
<div class="face front">
Card 1 Front
</div>
<div class="face back">
Card 1 Back
</div>
</div>
</div>
I would turn front and back of a card with this code, but after one click I see the back card and after second click I don't see any card! What is the problem?
$(".carta img").click(function() {
$(this).toggleClass("flipped");
})
.contenitorecarta {
position: relative;
width: 100px;
height: 150px;
perspective: 800px;
}
.carta {
width: 100px;
height: 150px;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carta img {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.carta.back {
transform: rotateY(180deg)
}
.carta .flipped {
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
<div class="carta">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
I assume that you are following this tutorial?: http://desandro.github.io/3dtransforms/docs/card-flip.html
Issues
You have four (4) issues:
In your CSS, you should have...
.contenitore-carta instead of .contenitorecarta.
.carta.flipped instead of .carta .flipped
.carta .back instead of .carta.back
In your JavaScript, the following should be changed from...
$(".carta img") to $(".carta").
Also, you need to add the vendor-prefixed style rules so that the transformations can work in all supported browsers. See A List Apart: Prefix or Posthack for a more information on this.
Solution
The code below should work correctly. Note: I translated the class names from Italian to English :)
$(".card").click(function() {
$(this).toggleClass("flipped");
})
.container {
width: 100px;
height: 150px;
position: relative;
border: 1px solid #CCC;
-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;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card div {
display: block;
height: 100%;
width: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-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>
<div class="container">
<div class="card">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
I made a few changes to your CSS and JS to achieve the effect you're looking for.
Changed JS so it's adding a class to the parent .carta so both children can be styled based on the change in state
Fixed the "contentitore-carta" selector in CSS — it was missing the hyphen
Instead of using the images for the transforms, I switched these to using the parent .front, .back divs. This isn't make-or-break, but transforms tend to play nicer with divs.
Think that covers it. Updated code below.
$(".carta").click(function() {
$(this).toggleClass("flipped");
})
.contenitore-carta {
position: relative;
width: 100px;
height: 150px;
perspective: 800px;
}
.carta {
width: 100px;
height: 150px;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carta .front,
.carta .back {
display: block;
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.carta .back {
transform: rotateY(180deg)
}
.carta.flipped {
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
<div class="carta">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
Same effect you want with just toogle instead rotateY
$(".carta img").click(function() {
$('.front, .back').toggle();
});
.contenitorecarta {
position: relative;
width: 100px;
height: 150px;
perspective: 800px;
}
.carta {
width: 100px;
height: 150px;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carta img {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.carta .back { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenitore-carta">
<div class="carta">
<div class="front">
<img width="100" height="150" src="http://placehold.it/100x150/F44/000.png&text=Front">
</div>
<div class="back">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
Since many right answers were already given, I just propose a solution with simplified markup and less style, tested both on latest Chrome and Firefox
http://codepen.io/anon/pen/rawWdJ
Markup
<div class="card">
<img class="front" src="http://placehold.it/120x150/F44/000.png&text=Front">
<img class="back" src="http://placehold.it/120x150/44F/000.png&text=Back">
</div>
Css
.card {
position: relative;
width: 120px;
transform-style: preserve-3d;
transition: 1s transform;
}
.card img {
backface-visibility: hidden;
position: absolute;
}
.card .back {
transform: rotateY(180deg)
}
.card.flip {
transform: rotateY(180deg)
}
Js
$('.card').on('click', function() {
$(this).toggleClass('flip');
});