-
-
Save harunpehlivan/a70fc7b199d4ecf01eb43853ff399681 to your computer and use it in GitHub Desktop.
Crazy Spinny Thing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment