O meu cubo ficou ainda mais interessante que o modelo apresentado por vocês naquele editor. O cubo se move conforme você diminui e aumenta a janela do navegador e está mais proporcional. A única coisa é que com perspective 600px, dependendo da posição que deixo meu navegador, o objeto não fica com cara de cubo e sim com cara de bloco, mais alongado na profundidade. Se colocar perspective 200px, ele estica mais ainda em sua profundidade, trazendo para mais perto a face frontal.
Gostaria de entender por que isso está acontecendo. E como fazer pro objeto não esticar/ encurtar mais, preservando sua característica de cubo, mesmo colocando valores diferentes de perspectiva.
body {
bottom: 0;
left: 0;
perspective: 600px;
position: absolute;
right: 0;
top: 0;
}
body, .cubo {
transform-style: preserve-3d;
}
.cubo {
height: 100px;
left: 200px;
position: relative; /* tb posso usar o absolute */
top: 200px;
/*transform: rotateX(10deg) rotateY(10deg);*/
width: 100px;
}
.cubo div {
/*display: block;*/
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100px;
}
.face1 {
background-color: red;
transform: translateZ(50px);
}
.face2 {
background-color: purple;
transform: translateX(50px) rotateY(90deg);
}
.face3 {
background-color: yellow;
transform: translateX(-50px) rotateY(-90deg);
}
.face4 {
background-color: blue;
transform: translateY(-50px) rotateX(90deg);
}
.face5 {
background-color: pink;
transform: translateY(50px) rotateX(-90deg);
}
.face6 {
background-color: orange;
transform: rotateY(180deg) translateZ(50px);
}