-1

1). "Link". I can't interact with the link/images on the backface of "follow us!" flip card on the bottom. (iv'e only used webkit). HELP :'(

2). Also when you move your cursor slowly towards the flip card, the card vibrates if your cursor's position isn't fixed. Unlike here: http://css3.bradshawenterprises.com/flip/

Trust me iv'e tried everything, and i'm just sick of this.

So lost rn
  • 327
  • 3
  • 4

1 Answers1

3

To see both sides you need to use the CSS property and value, -webkit-transform-style: preserve3d on your div#flipthing.

Your cards are vibrating because the two faces are not aligned exactly on top of each other. When the card is flipping, your cursor enters the margins, or the back element which causes the vibrating, or the resetting of the animation.

Try setting your two <p> tags to be exactly the same, stacked on top of the each other:

div#flipthing { position: relative; }

div#flipthing p {
    position: absolute;
    top: 0;
    left: 0;
}

div#flipthing p:first-child {
    z-index: 10;
}

This will allow your first paragraph to be stacked on top of the second.

Additionally, for your back face, you should put the -webkit-transform and -webkit-backface-visibility on the paragraph instead of the nested table.

Christopher Parsons
  • 383
  • 3
  • 11