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=".1.1/jquery.min.js"></script>

<div class="contenitore-carta">
  <div class="carta">
    <div class="front">
      <img width="100" height="150" src=".png&text=Front">
    </div>
    <div class="back">
      <img width="100" height="150" src=".png&text=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./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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 23, 2015 at 14:12 Mr. Polywhirl 48.9k1212 gold badges9494 silver badges145145 bronze badges asked Jan 23, 2015 at 13:56 JuppyJuppy 11133 silver badges1010 bronze badges 2

• Your HTML is missing. – Bono Commented Jan 23, 2015 at 13:59
• I added placeholder images. – Mr. Polywhirl Commented Jan 23, 2015 at 14:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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./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.

1. Changed JS so it's adding a class to the parent .carta so both children can be styled based on the change in state
2. Fixed the "contentitore-carta" selector in CSS — it was missing the hyphen
3. 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./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./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');
});