Skip to content

Instantly share code, notes, and snippets.

@RStankov
Created October 13, 2010 12:06
Show Gist options
  • Save RStankov/623894 to your computer and use it in GitHub Desktop.
Save RStankov/623894 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<!-- saved from url=(0035)http://mir.aculo.us/demos/flip.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>HTML5 Mobile Pro Example: Flips</title>
<style type="text/css" media="screen">
body { font-family: Arial;}
img { width: 100px; height: 100px;}
td { padding: 10px }
.flip-horizontal { -webkit-transform: matrix(-1, 0, 0, 1, 0, 0) }
.flip-vertical { -webkit-transform: matrix(1, 0, 0, -1, 0, 0) }
.original {
-webkit-transition: all .2s ease-in-out;
}
.original:hover {
-webkit-transform: matrix(-1, 0, 0, -1, 0, 0);
}
</style>
</head>
<body>
<h2>Flipping images with just CSS demo</h2>
<p>Requires Chrome, Safari or other WebKit-based browser.</p>
<table>
<tbody><tr>
<td>
original<br>
<img src="./HTML5 Mobile Pro Example Flips_files/avatar.png" class="original">
</td>
<td>
horizontal flip<br>
<img src="./HTML5 Mobile Pro Example Flips_files/avatar.png" class="flip-horizontal">
</td>
<td>
vertical flip<br>
<img src="./HTML5 Mobile Pro Example Flips_files/avatar.png" class="flip-vertical">
</td>
</tr>
</tbody></table>
<pre><code>.flip-horizontal { -webkit-transform: matrix(-1, 0, 0, 1, 0, 0) }
.flip-vertical { -webkit-transform: matrix(1, 0, 0, -1, 0, 0) }</code></pre>
<p>
<a href="http://mir.aculo.us/2010/10/13/flipping-images-with-just-css/">See the blog post on flipping images with just CSS</a>.
</p>
<p>
<em>Learn more, much, much more at my <a href="http://html5mobilepro.com/">HTML5 Mobile Pro workshop!</a></em>
</p>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment