Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
<div class="cubo">
  <div class="topo">Topo</div>
  <div class="direita">Direita</div>
  <div class="base">Base</div>
  <div class="esquerda">Esquerda</div>
  <div class="frente">Frente</div>
  <div class="tras">Atras</div>
</div>
  
  
  
  
</body>
</html>
 
​
/* O cubo */
.cubo {
  transform-style: preserve-3d;
  width: 100px;
  height: 100px;
  margin: 100px 100px;
  transform: rotateX(-20deg) rotateY(20deg);
 transform: rotateX(-20deg) rotateY(740deg);
  
}
​
​
/* Propriedades iguais para todas as faces */
​
.cubo div {
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   background: rgba(0,0,0,.2);
   box-shadow: inset 0px 0px 10px #000;
   position: absolute;
}
​
​
/* 
As faces em si
Tente trocar o valor do rotate para ver
funcionando
*/
​
.topo {
   -webkit-transform: rotateX(90deg); 
   margin-top: -50px;
}
​
.direita {
   -webkit-transform: rotateY(90deg); 
   margin-left: 50px;
}
​
.base {
   -webkit-transform: rotateX(-90deg); 
   margin-top: 50px;
}
​
.esquerda {
   -webkit-transform: rotateY(-90deg); 
   margin-left: -50px;
}
​
.frente {
   -webkit-transform: translateZ(50px);
}
​
.tras {
   -webkit-transform: translateZ(-50px) rotateX(180deg);
}
​
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers