2
respostas

Como preservar a característica do objeto com valores de perspective diferentes?

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);
}
2 respostas

Oi Lygia, tudo bom?

Não entendi muito bem a sua dúvida, mas se quiser se aprofundar nos estudos sobre perspective acredito que esses posts podem lhe ajudar:

Olá Mario!

Obrigada pelos links!

Só quis dizer que meu cubo deixa de ser cubo conforme você estica ou reduz a janela do browser e, também, conforme o valor que você coloca na perspectiva. O resultado que eu desejo é que ele permaneça com a mesma forma de cubo, independentemente dessas variáveis. Talvez esteja faltando alguma coisa no meu código, ou tem coisa a mais do que devia.