| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| "http://www.w3.org/TR/html4/loose.dtd"> |
| |
| <html lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <title>Image Flip</title> |
| |
| <style type="text/css" media="screen"> |
| body { |
| margin-top: 20px; |
| height: 300px; |
| font-size: 12px; |
| line-height: 1.5em; |
| font-family: "Lucida Grande", Verdana, Arial; |
| } |
| #flip-container { |
| position: relative; |
| margin: 10px auto; |
| width: 250px; |
| height: 261px; |
| z-index: 1; |
| } |
| .face.back { |
| display: none; |
| } |
| @media all and (-webkit-transform-3d) { |
| /* Use the media query to determine if 3D transforms are supported */ |
| #flip-container { |
| -webkit-perspective: 1000; |
| } |
| #flip-card { |
| width: 100%; |
| height: 100%; |
| -webkit-transform-style: preserve-3d; |
| -webkit-transition: -webkit-transform 1s; |
| } |
| #flip-container:hover #flip-card { |
| -webkit-transform: rotateY(180deg); |
| } |
| .face { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| -webkit-backface-visibility: hidden; |
| } |
| .face.back { |
| display: block; |
| -webkit-transform: rotateY(180deg); |
| -webkit-box-sizing: border-box; |
| padding: 10px; |
| font-size: 12pt; |
| color: white; |
| text-align: center; |
| background-color: #835A99; |
| -webkit-border-radius: 10px; |
| } |
| } |
| </style> |
| |
| </head> |
| <body> |
| <div id="flip-container"> |
| <div id="flip-card"> |
| <div class="front face"> |
| <img src="poster-circle.png" width="250" height="261" alt="Poster Circle"/> |
| </div> |
| <div class="back face"> |
| This flip effect is done entirely with 3D transforms and transitions—no JavaScript required! |
| </div> |
| </div> |
| </div> |
| |
| </body> |
| </html> |
