imkevinxu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    CSS3 Animation that rotates any element naturally.
Demo here http://bl.ocks.org/4402407/
Full credit to Pedro Ivo Hudson for the The Goodman

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>CSS Rotate Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>CSS Rotate Effect</h1>

    <div class="square rotate"></div>
    <img class="rotate" src="http://placekitten.com/130/130" alt="Place Kitten Cuteeee">

    <h2>Credits</h2>

    <ol>
        <li><a href="https://github.com/podrivo" target="_blank">Pedro Ivo Hudson</a> for the <a href="http://thegoodman.cc/" target="_blank">The Goodman</a></li>
        <li><a href="https://gist.github.com/imkevinxu" target="_blank">Kevin Xu</a> and his random free time</li>
    </ol>

    <script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</body>
</html>

## style.css
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 500px;
  margin: 50px auto;
  color: #444;
}

h1, h2 { font-weight: 400; }
p, li { line-height: 23px; }
a { color: steelBlue; }
a:not(:hover) { text-decoration: none; }

/*  Uses -prefix-free for cleaner unprefixed CSS
    http://leaverou.github.com/prefixfree/  */

.square {
  background: #FA8072;
  width: 130px;
  height: 130px;
  border-radius: 20px;
  margin: 50px;
  display: inline-block;
}

img {
  border-radius: 65px;
  margin: 50px;
  display: inline-block;
}

.rotate {
  animation: rotate 2.6s .5s cubic-bezier(.68,-.55,.265,1.55) forwards infinite;
}

@keyframes rotate {
  0% { transform: rotate(0); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>CSS Rotate Effect</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>

	<h1>CSS Rotate Effect</h1>

	<div class="square rotate"></div>
	<img class="rotate" src="http://placekitten.com/130/130" alt="Place Kitten Cuteeee">

	<h2>Credits</h2>

	<ol>
	<li><a href="https://github.com/podrivo" target="_blank">Pedro Ivo Hudson</a> for the <a href="http://thegoodman.cc/" target="_blank">The Goodman</a></li>
	<li><a href="https://gist.github.com/imkevinxu" target="_blank">Kevin Xu</a> and his random free time</li>
	</ol>

	<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

	</body>
	</html>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 500px;
	margin: 50px auto;
	color: #444;
	}

	h1, h2 { font-weight: 400; }
	p, li { line-height: 23px; }
	a { color: steelBlue; }
	a:not(:hover) { text-decoration: none; }

	/* Uses -prefix-free for cleaner unprefixed CSS
	http://leaverou.github.com/prefixfree/ */

	.square {
	background: #FA8072;
	width: 130px;
	height: 130px;
	border-radius: 20px;
	margin: 50px;
	display: inline-block;
	}

	img {
	border-radius: 65px;
	margin: 50px;
	display: inline-block;
	}

	.rotate {
	animation: rotate 2.6s .5s cubic-bezier(.68,-.55,.265,1.55) forwards infinite;
	}

	@keyframes rotate {
	0% { transform: rotate(0); }
	25% { transform: rotate(90deg); }
	50% { transform: rotate(180deg); }
	75% { transform: rotate(270deg); }
	100% { transform: rotate(360deg); }
	}