Fork me on GitHub

3Drollovers.css test page

  1. Rollover

    MDN HTML5

  2. Fade

    MDN HTML5

  3. Flip

    MDN HTML5

  4. Flip Up

    MDN HTML5

  5. Flip Box

    MDN HTML5

  6. Flip Box Fade

    MDN HTML5

  7. Flip Box Fade Up

    MDN HTML5

  8. Flip Box Fade Hideback

    MDN HTML5

  9. Flip Box Fade Up Hideback

    MDN HTML5

  10. Nananana

    MDN HTML5

Try to set the different classes in the form field and then roll over the image.

MDN HTML5 
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"><title>Rollover</title>
<link rel="stylesheet" href="3Drollovers.css" type="text/css">
</head><body>
<div class="">
  <a class="rollover"
        href="https://developer.mozilla.org/en/HTML/HTML5">
    <figure class="cube">
      <img src="mdnface.png" class="front" alt="MDN">
      <img src="htmlface.png" class="back" alt="HTML5">
    </figure>
  </a>
</div>
</body></html>