Quick demo of a simple CSS transition and transform. See Animating CSS Transitions for an overview.
The container sets the animation's perspective and the inner pane is the element that actually flips, rotating 180 degrees around the Y-axis when the parent container is clicked.
Note that we're only using the -webkit vendor prefix, so this is only going to work in WebKit browsers.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| width: 960; | |
| height: 500px; | |
| } | |
| path { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 4; | |
| } | |
| .container { | |
| -webkit-perspective: 150; | |
| } | |
| .container.flip .pane { | |
| -webkit-transform: rotateY(180deg); | |
| } | |
| .pane { | |
| -webkit-transition: 0.6s; | |
| -webkit-transform-style: preserve-3d; | |
| } | |
| </style> | |
| <body> | |
| <div class="container" onclick="this.classList.toggle('flip');"> | |
| <div class="pane"> | |
| <svg> | |
| <path d="M192,354.901974927634L224,365.62566760306555C256,376.3493602784971,320, 397.79674562936026,384,359.66860307380557C448,321.5404605182509,512,223.8367900562783,570,192.79610155957437C628,161.7554130628705,680,197.7770653143522,706,215.18885326571763L732,233" /> | |
| </svg> | |
| </div> | |
| </div> |