Cards animation Jquery and CSS

Question

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 added placeholder images. – Mr. Polywhirl Jan 23 '15 at 14:11 — Mr. Polywhirl, Jan 23 '15 at 14:11

Mr. Polywhirl · Accepted Answer · 2015-01-23T14:51:16.467

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>

[CSS Tricks: CSS Almanac » Properties » T » Transform](http://css-tricks.com/almanac/properties/t/transform/) — Mr. Polywhirl, Jan 26 '15 at 10:42
@Mr.Polywhirl can you help me here http://stackoverflow.com/questions/28167989/animation-cards-javascript-and-css please? — Juppy, Jan 27 '15 at 10:18

score 2 · Answer 2 · answered Jan 23 '15 at 14:30

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>

score 0 · Answer 3 · answered Jan 23 '15 at 14:15

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>

I like it, though it's going to be hard to animate later (not that it was doing it currently). — KyleMit, Jan 23 '15 at 14:25
This does not animate? See [My answer](http://stackoverflow.com/a/28112004/1762224). — Mr. Polywhirl, Jan 23 '15 at 14:27

Fabrizio Calderan · Answer 4 · 2015-01-23T14:54:11.963

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

Cards animation Jquery and CSS

4 Answers4

Issues

Solution