Flip of the tile

Question

Hi I am implementing the flip of the tile once it is get zoom.

I am unable to add the css to the new class which I am adding in the jquery.

i need some help regarding this. Use Case is once you hover on the tile it will get zoom then I am adding a new class on click of the tile and I am adding css for that but it is not working. initially i need to show the front text, once I clicked on the tile then the front text should get hide and the back text to be visible and vise versa. This is what I have tried:

HTML:

<div class="boxes"> 
        <div class="box"> 
            <div class="face front"> 
                Front
            </div> 
            <div class="face back"> 
                Back
            </div> 
        </div> 
    </div> 

Css:

.boxes {
    -webkit-transform: translateZ(0);
    position: relative;
    width: 600px;
    height: 700px;
    top: 0px;
}

.box {
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -moz-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
    -o-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    width: 140px;
    height: 140px;
    font-family: Helvetica, sans-serif;
    text-align: center;
    padding: 13px 10px;
    margin: 0 5px;
    background-color: #fefefe;
    background: -moz-linear-gradient(90deg, #eee, #fff, #eee);
    background: -webkit-gradient(linear, left top, left bottom, from(#eee),
        color-stop(0.5, #fff), to(#eee) );
    border: 3px solid #e1e1e1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 15px;
    cursor: pointer;

}
.box:hover {
  border-color: #e1e1e1;
  -webkit-box-shadow: #666 0px 0px 6px;
  -moz-box-shadow: #666 0px 0px 6px;
  box-shadow: #666 0px 0px 6px;
  background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), color-stop(0.5, #fff), to(#e1e1e1));
  -moz-transform: scale(1.1);  
          -o-transform: scale(1.1);  
     -webkit-transform: scale(1.1); 
             transform: scale(1.1);
}
.flip {
  -webkit-transform: rotatex(-180deg)!important;
}

.front {
  z-index: 1;
    cursor: pointer;
}
.back {
  -webkit-transform: rotatex(-180deg);
    color: black;
    cursor: pointer;
}

JQuery:

$('.box').click(function(e){
                alert('hai');
                $(this).addClass('flip').mouseleave(function(){
                    $(this).removeClass('flip');
                });
            });

Demo Link

Answer 1

look at this code: DEMO

I added some class and change in your html and css:

CSS:

.box-container{
    width:166px;
    height:172px;

}

.box-container .box.clicked .back{
    opacity:1;
}
.box-container .box.clicked .front{
    opacity:0;
}

.box-container .box.clicked{
    -webkit-transform:scaleY(-1);
}
.face{
    transition: all 0.5s linear;
}

JQuery:

$(".box").click(function(){
    $(this).toggleClass("clicked");
});

Answer 2

I did some modifications on your JSFiddle, see this fork: http://jsfiddle.net/u3z6Y/6/

Basically what I do is

• Applying a class on the wrapper instead of the box to be able to target the flipped versions of front and back:

  $('.box').click(function(e){
     $('.boxes').toggleClass('flip');
     // ..
  });
  

• Targeting both the flipped and the non-flipeed version from CSS:

  .front {
    z-index: 1;
      cursor: pointer;
      -webkit-transform: rotatex(0deg)!important;
  }
  .back {
    -webkit-transform: rotatex(-180deg);
      color: black;
      cursor: pointer;
  }
  .flip .front {
      -webkit-transform: rotatex(-180deg)!important;
  }
  .flip .back {
      -webkit-transform: rotatex(0deg)!important;
  }