Skip to content

Instantly share code, notes, and snippets.

@leechy

leechy/dabblet.css

Created February 11, 2015 14:52
Show Gist options
  • Save leechy/38f0117e6b092a681c8e to your computer and use it in GitHub Desktop.
Save leechy/38f0117e6b092a681c8e to your computer and use it in GitHub Desktop.
Download ZIP
3d transform for Tiny Fort
Raw
dabblet.css
/**
* 3d transform for Tiny Fort
*/
.tech-canvas {
position: relative;
width: 500px;
height: 500px;
perspective: 800px;
box-shadow: 0 0 5px #000 inset;
}
.tech {
position: absolute;
width: 500px;
height: 500px;
background: pink;
transform-origin: 250px 250px;
transform: rotateX(60deg);
perspective: 800px;
opacity: 0.7;
}
.infantry {
position: absolute;
width: 100px;
height: 100px;
left: 200px;
top: 200px;
background: blue;
transform-origin: 50px 50px;
transform: rotateX(60deg) rotateZ(120deg) translate(0, 120px) rotateZ(-120deg) rotateX(-60deg);
transition: all 1s;
}
.infantry2 {
transform: rotateX(60deg) rotateZ(-120deg) translate(0, 120px) rotateZ(120deg) rotateX(-60deg);
transform: rotateX(60deg) rotateZ(-240deg) translate(0, 120px) rotateZ(240deg) rotateX(-60deg);
transform: rotateX(60deg) rotateZ(-0deg) translate(0, 120px) rotateZ(0deg) rotateX(-60deg);
}
.infantry3 {
transform: rotateX(60deg) rotateZ(-0deg) translate(0, 120px) rotateZ(0deg) rotateX(-60deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="tech-canvas">
<div class="tech"></div>
<div class="infantry"></div>
<div class="infantry infantry2"></div>
<div class="infantry infantry3"></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