Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created December 5, 2012 12:50
Show Gist options
  • Save dziudek/4215261 to your computer and use it in GitHub Desktop.
Save dziudek/4215261 to your computer and use it in GitHub Desktop.
Download ZIP
Image Roll
Raw
dabblet.css
/**
* Image Roll
*/
#image-roll {
height: 200px;
width: 600px;
perspective: 600;
}
#image-roll > div {
float: left;
height: 300px;
opacity: 0;
transform: rotateY(-120deg);
transform-origin: right 0;
transition: transform .3s ease-out;
width: 200px;
}
#image-roll > div.active {
opacity: 1;
transform: rotateY(0deg);
}
.image-roll1 {
background: transparent url('http://placekitten.com/600/300') 0 0;
}
.image-roll2 {
background: transparent url('http://placekitten.com/600/300') -200px 0;
}
.image-roll3 {
background: transparent url('http://placekitten.com/600/300') -400px 0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="image-roll">
<div class="image-roll1"></div>
<div class="image-roll2"></div>
<div class="image-roll3"></div>
</div>
<hr />
<button id="btn">RUN!</button>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment