Skip to content

Instantly share code, notes, and snippets.

@leechy

leechy/dabblet.css

Created July 1, 2013 08:58
Show Gist options
  • Save leechy/5899398 to your computer and use it in GitHub Desktop.
Save leechy/5899398 to your computer and use it in GitHub Desktop.
Download ZIP
3D Wheel of Fortune
Raw
dabblet.css
/**
* 3D Wheel of Fortune
*/
.pers {
width: 500px;
height: 500px;
background: lightblue;
perspective: 2000px;
perspective-origin: 50% 50%;
}
.item {
position: absolute;
width: 100px;
height: 100px;
}
.item1 {
transform: translate(200px, 150px) rotateY(10deg) rotateX(-185deg) translateZ(400px);
background: pink;
}
.item2 {
transform: translate(200px, 150px) rotateY(10deg) rotateX(0deg) translateZ(400px);
background: blue;
}
.item3 {
transform: translate(200px, 150px) rotateY(10deg) rotateX(-15deg) translateZ(400px);
background: red;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="pers">
<div class="item item1">текст</div>
<div class="item item2">текст</div>
<div class="item item3">текст</div>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment