Skip to content

Instantly share code, notes, and snippets.

@imkevinxu

imkevinxu/README.md

Last active December 10, 2015 07:38
Show Gist options
  • Save imkevinxu/4402407 to your computer and use it in GitHub Desktop.
Save imkevinxu/4402407 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Rotate Effect
Raw
README.md
Raw
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>
Raw
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); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment