Skip to content

Instantly share code, notes, and snippets.

@Edengb
Last active May 12, 2016 14:40
Show Gist options
  • Save Edengb/7ba75fdafb09ce15a6c367f166d9f26d to your computer and use it in GitHub Desktop.
Save Edengb/7ba75fdafb09ce15a6c367f166d9f26d to your computer and use it in GitHub Desktop.
Untitled
.cubo {
transform-style: preserve-3d;
width: 720px;
margin: 60px auto;
position: relative;
transform: rotateX(10deg) rotateY(10deg);
}
.face {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
.frente {
background-color: rgba(0, 0, 0, 0.3);
transform: translateZ(-100px) translateY(-1px);
}
.direita {
background-color: rgba(255, 0, 0, 0.3);
transform: translateX(-59px) translateY(8px) rotateY(-90deg);
}
.esquerda {
background-color: rgba(255, 0, 0, 0.3);
transform: translateX(41px) translateY(8px) rotateY(90deg);
}
.cima {
background-color: rgba(0, 255, 255, 0.6);
transform: translateY(-42px) translateX(-9px) rotateX(-90deg);
}
.baixo {
background-color: rgba(0, 255, 255, 0.6);
transform: translateY(58px) translateX(-9px) rotateX(90deg);
}
.tras {
background-color: rgba(0, 0, 0, 0.3);
transform: translateZ(55px) translateX(-10px) translateY(9px) rotateY(-180deg);
}
<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","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