CODEWITHSUNDEEP
jquerycssrotationcss-animationsflip
iD4ve
iD4ve

Reputation: 55

Flip Effect with front and back site

I want to create a flip effect that fires on mouseover and flips back to the front panel on mouse out.. so there has to be a front and a back-side of the card that should flip: HTML:

<div class="card">
  <div class="front"> Front-Content </div>
  <div class="back"> Back-Content </div>
</div>

<div class="card">
  <div class="front"> 2nd Front-Content </div>
  <div class="back"> 2nd Back-Content </div>
</div>

So as you can see I want multiple cards to flip to their back-sides on mouseover. I think the solution would be toggling a class that has a CSS3 Animation for flipping (rotateY) via jQuery but I don't get it to work.

Best Regards Dave

Upvotes: 2

Views: 3942

Answers (2)

Sandip Vora
Sandip Vora

Reputation: 183

.card-container{
    width: 100px;
    perspective : 1000px;
    -webkit-perspective : 1000px;
}
.card{
    position : relative;
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
    transform-style: preserve-3d;
}

.front{
    background-color: #f00;
    height : 100px;
    width : 100px;
    position: absolute;
    top : 0;
    left : 0;
    z-index : 3;
    transform : rotate(0deg);
    -moz-transform : rotate(0deg);
    transition : 1s transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.back{
    background-color: #00f;
    height: 100px;
    width : 100px;
    position : absolute;
    top : 0;
    left : 0;
    z-index : 1;
    transform : rotateY(-180deg);
    -moz-transform : rotateY(-180deg);
    transition : 1s transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.card-container:hover .front{
    transform : rotateY(180deg);
    -moz-transform : rotateY(180deg);
}
.card-container:hover .back{
    transform : rotateY(0deg);
    -moz-transform : rotateY(0deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="card-container">
    <div class="card">
      <div class="front"> Front-Content </div>
      <div class="back"> Back-Content </div>
    </div>
</div>
<div class="card-container">
    <div class="card">
      <div class="front"> 2nd Front-Content </div>
      <div class="back"> 2nd Back-Content </div>
    </div>
</div>
Please find your solution over here

Upvotes: 0

durgesh.patle
durgesh.patle

Reputation: 720

Back-front flip effect can be achieved by css, Try this : http://davidwalsh.name/css-flip

Upvotes: 2

Related Questions