<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
/* General style, transition occurs when taking mouse pointer of the item */
img.crazy {
display: block;
margin: 10em auto;
/* That code is really just the opposite of the hover code. */
transform: scale(1) rotate(720deg);
/* How long transitions take */
transition: all 1s;
}
/* Style applied when mouse pointer hovering */
img.crazy:hover {
transform: scale(0.1) rotate(-720deg);
}
</style>
</head>
<body>
<h1>Crazy Spinny Thing</h1>
<p>Put your mouse pointer in the emiddle of the picture. When you view the source code, you'll see the regular state and :hover states have opposite transform: settings.</p>
<img src="hypno.png" class="crazy" alt="hypnotic" title="Hypnotic" />
</body>
</html>