Skip to content

Instantly share code, notes, and snippets.

Created December 2, 2014 16:50
Show Gist options
  • Save anonymous/70a44631ea6fdab54962 to your computer and use it in GitHub Desktop.
Save anonymous/70a44631ea6fdab54962 to your computer and use it in GitHub Desktop.
Untitled
.face {
display: block;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.frente {
background-color: red;
transform: translateZ(100px);
}
.direita {
background-color: blue;
transform: translateX(100px) rotateY(90deg);
}
.esquerda {
background-color: green;
transform: translateX(-100px) rotateY(-90deg);
}
.cima {
background-color: yellow;
transform: translateY(100px) rotateX(90deg);
}
.baixo {
background-color: magenta;
transform: translateY(-100px) rotateX(-90deg);
}
.tras {
background-color: cyan;
transform: translateZ(-100px) rotateY(180deg);
}
.cubo {
transform-style: preserve-3d;
width: 200px;
height: 200px;
position: relative;
top: 100px;
left: 100px;
transform: rotateX(10deg) rotateY(10deg);
}
<div class="cubo">
<div class="face frente"></div>
<div class="face direita"></div>
<div class="face esquerda"></div>
<div class="face cima"></div>
<div class="face baixo"></div>
<div class="face tras"></div>
</div>
// alert('Hello world!');
{"view":"split-vertical","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