CODEWITHSUNDEEP
jquerycss
user3008629
user3008629

Reputation: 13

flip effect with multiple backgrounds

I want to make flip effect of my background(like card flip) except the back face is always different depending on link clicked. Tried to make it in Jquery with changing the backface div before clicking the link but having lots of trouble. Any suggestions?

Upvotes: 1

Views: 658

Answers (1)

Willem
Willem

Reputation: 5404

Make sure to use two elements, front and back, and use backface-visibility: hidden; to hide the back of these elements. On click just change the rotation so that the hidden and the visible sides exchange and animate (by toggling class 'flip' or something):

<div class="click panel">
    <div class="front"><h2>Click Me!</div>
    <div class="back">check you on the flip side</div>
</div>

css:

.panel > div {
    transform-style: preserve-3d;
    backface-visibility: hidden; 
    transition: all .4s ease-in-out;
}
.panel .front { 
    transform: rotateY(0deg);        
}
.panel.flip .front {  
    transform: rotateY(180deg);     
}
.panel .back{ 
    transform: rotateY(180deg);

}
.panel.flip .back{  
    transform: rotateY(0deg);     
}

jquery:

 $('.click').click(function(){$(this).toggleClass('flip');});

You can change the content in the click function. Working example: http://jsfiddle.net/y6W49/7/

Upvotes: 1

Related Questions