Skip to content

Instantly share code, notes, and snippets.

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.
CSS Rotate Effect
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title>CSS Rotate Effect</title>
<link rel="stylesheet" href="style.css">
<h1>CSS Rotate Effect</h1>
<div class="square rotate"></div>
<img class="rotate" src="" alt="Place Kitten Cuteeee">
<li><a href="" target="_blank">Pedro Ivo Hudson</a> for the <a href="" target="_blank">The Goodman</a></li>
<li><a href="" target="_blank">Kevin Xu</a> and his random free time</li>
<script src="//"></script>
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 */
.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