Skip to content

Instantly share code, notes, and snippets.

@schadeck

schadeck/dabblet.css

Created April 8, 2013 14:42
Show Gist options
  • Save schadeck/5337302 to your computer and use it in GitHub Desktop.
Save schadeck/5337302 to your computer and use it in GitHub Desktop.
Download ZIP
demo to explain chained transforms
Raw
dabblet.css
/**
* demo to explain chained transforms
*/
* { margin: 0; }
.wrap, .wrap * { display: block; width: 4em; height: 4em; }
.wrap { outline: dashed 1px dodgerblue; margin: 13em auto 0; }
.deg45 {
position: absolute;
animation: ani 8s infinite;
}
.deg45:before, .deg45:after {
position: absolute;
top: 50%; left: -182.5%;
width: 500%;
border-top: solid 1px deeppink;
text-align: right;
}
.deg45:before { content: 'X axis'; }
.deg45:after { transform: rotate(-90deg); content: 'Y axis'; }
@keyframes ani {
25% { transform: rotate(45deg); }
50% { transform: rotate(45deg) translate(12em); }
75%, 100% { transform: rotate(45deg) translate(12em) rotate(-45deg); }
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='wrap'>
<a href='#' class='deg45'><img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg'></a>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment