After searching "flip card" in google and our stackexchange site, there is no result and I have no ideas about how to flip a card by a corner. I am developing a ios card game with cocos2d, in this game, i just want to touch the right-bottom corner of back face, and hold on moving towards left-up direction. With moving a little distance, the card can flip to front face. Any ideas?
\$\begingroup\$ Not an answer, but in css3playground.com/flip-card.php they do exactly what you are asking for (mid-right example) using CSS3. Perhaps looking at the source code you can get some inspiration! \$\endgroup\$– DanApr 10, 2013 at 12:21
\$\begingroup\$ You could just provide animations for the card flip - I can't think of an easy way of doing that programmatically. You could look at the link that Dan gave or at the flipping mechanism provided in Cocoa (Apple-specific). \$\endgroup\$– PolarApr 10, 2013 at 13:02
\$\begingroup\$ The examples on the link site that Dan gave is not the effect i want.But still thanks.@Polar maybe i'll go deep into the flipping mechanism in Cocoa. \$\endgroup\$– ChildhoodAndyApr 10, 2013 at 14:18
\$\begingroup\$ Have a look at this example for inspiration: mypageflip.com/demos/xml-basic/default.html note the bending effect is faked; it's a gradient on a standard flat image of the flipped side. \$\endgroup\$– congusbongusApr 11, 2013 at 0:13
\$\begingroup\$ @CongXu Yes, it's the very effect that i want! \$\endgroup\$– ChildhoodAndyApr 11, 2013 at 2:33
Your image example doesn't fit reality for the card you have shown. You are showing the wrong corner, but that's just me pointing out little things ;)
I will give you the simplified version for being able to flip an area that's a triangle.
- Calculate the x and y offset from the bottom right corner. (it's the difference between the world coords of the dragged corner and the original position of the mentioned corner)
- Draw a similar triangular area on the bottom right corner. For U,W mapping just flip the X and Y.
\$\begingroup\$ 1)Yes, you are right. The image i provided doesn't fit reality for the card, i simply made the picture in flashIDE, for a better understanding. \$\endgroup\$ Apr 10, 2013 at 14:26
\$\begingroup\$ Very useful suggestion in num2.But Could you give a sample code to explain that?I'm a little confused... \$\endgroup\$ Apr 10, 2013 at 14:33