Alignement des faces cuboïdes 3D css

Question

J'essaie de créer un cuboïde sensible en HTML/CSS, mais la face droite du cuboïde ne s'aligne pas sur les faces restantes. Quelqu'un peut-il m'aider avec ça?

Je suis coller un lien jsFiddle pour le même, ci-dessous:

#container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    perspective: 1000px; 
 
    perspective-origin: 50% 50%; 
 
} 
 

 
#container div { 
 
    height: 100vh; 
 
    /*width: 100%;*/ 
 
    position: absolute; 
 
    /*display: inline-block;*/ 
 
    transform-origin: 50% 50%; 
 
    transform-style: preserve-3d; 
 
} 
 

 
#left { 
 
    width: 100vh; 
 
    background: steelblue; 
 
    transform: translateX(-50vh) translateZ(-50vh) rotateY(90deg); 
 
} 
 
#right { 
 
    width: 100vh; 
 
    background: teal; 
 
    transform: translateX(50vw) rotateY(-90deg); 
 
} 
 
#floor { 
 
    width: 100%; 
 
    background: #55DF03; 
 
    transform: translateY(50vh) translateZ(-50vh) rotateX(90deg); 
 
} 
 
#ceil { 
 
    width: 100%; 
 
    background: grey; 
 
    transform: translateY(-50vh) translateZ(-50vh) rotateX(90deg); 
 
} 
 
#back { 
 
    width: 100%; 
 
    background: #2091FE; 
 
    transform: translateZ(-100vh); 
 
}

<div id="container"> 
 
    <div id="left"></div> 
 
    <div id="floor"></div> 
 
    <div id="right"></div> 
 
    <div id="ceil"></div> 
 
    <div id="back"></div> 
 
</div>

https://jsfiddle.net/srikanthaero/4s8wovjm/

Answer 1

Voici la réponse face à Cuboid 3D:

\t #container { 
 
\t \t width: 100vw; 
 
\t \t height: 100vh; 
 
\t \t perspective: 1000px; 
 
\t \t perspective-origin: 50% 50%; 
 
\t } 
 

 
\t #container div { 
 
\t \t height: 100vh; 
 
\t \t /*width: 100%;*/ 
 
\t \t position: absolute; 
 
\t \t /*display: inline-block;*/ 
 
\t \t transform-origin: 50% 50%; 
 
\t \t transform-style: preserve-3d; 
 
\t } 
 

 
\t #left { 
 
\t \t width: 100vh; 
 
\t \t background: steelblue; 
 
\t \t transform: translateX(-50vh) translateZ(-50vh) rotateY(90deg); 
 
\t } 
 
#right { 
 
    width: 100vh; 
 
    background: teal; 
 
    transform: translateX(0%) rotateY(-90deg); 
 
    right: 0px; 
 
    TRANSFORM-ORIGIN: 100% 100% !important; 
 
} 
 
\t #floor { 
 
\t \t width: 100%; 
 
\t \t background: #55DF03; 
 
\t \t transform: translateY(50vh) translateZ(-50vh) rotateX(90deg); 
 
\t } 
 
\t #ceil { 
 
\t \t width: 100%; 
 
\t \t background: grey; 
 
\t \t transform: translateY(-50vh) translateZ(-50vh) rotateX(90deg); 
 
\t } 
 
\t #back { 
 
\t \t width: 100%; 
 
\t \t background: #2091FE; 
 
\t \t transform: translateZ(-100vh); 
 
\t }

<div id="container"> 
 
\t <div id="left"></div> 
 
\t <div id="floor"></div> 
 
\t <div id="right"></div> 
 
\t <div id="ceil"></div> 
 
\t <div id="back"></div> 
 
</div>

Answer 2

J'ai changé la façon de déplacer les éléments, il est plus facile de changer la transformation origine que jouer avec traduit:

body { 
 
    margin: 0px; 
 
} 
 
#container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    perspective: 1000px; 
 
    perspective-origin: 50% 50%; 
 
} 
 
#container div { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
} 
 
#container #left { 
 
    width: 100vh; 
 
    background: steelblue; 
 
    transform-origin: left center; 
 
    transform: rotateY(90deg); 
 
} 
 
#container #right { 
 
    width: 100vh; 
 
    background: teal; 
 
    transform-origin: right center; 
 
    transform: rotateY(-90deg); 
 
    right: 0px; 
 
} 
 
#floor { 
 
    width: 100%; 
 
    background: #55DF03; 
 
    transform: translateY(50vh) translateZ(-50vh) rotateX(90deg); 
 
} 
 
#ceil { 
 
    width: 100%; 
 
    background: grey; 
 
    transform: translateY(-50vh) translateZ(-50vh) rotateX(90deg); 
 
} 
 
#back { 
 
    width: 100%; 
 
    background: #2091FE; 
 
    transform: translateZ(-100vh); 
 
    opacity: 0.5; 
 
}

<div id="container"> 
 
    <div id="left"></div> 
 
    <div id="floor"></div> 
 
    <div id="right"></div> 
 
    <div id="ceil"></div> 
 
    <div id="back"></div> 
 
</div>

Sur une note de côté, vous demandez:

Pour le visage gauche, quand j'utilise 'translateX (-50vh)', il aligne parfaitement. Mais je pensais que cela aurait dû être aligné sur 'translateX (-50vw)'. Comment '-50vh' est-il suffisant?

Le côté gauche a une largeur de 100vh. L'origine de la transformation est le centre, donc la rotation de 90deg est faite autour d'un point qui est 50vh (la moitié de 100vh) à la droite de la bordure gauche de l'élément. Pour l'adapter, vous devez traduire X moins ce montant.

Aussi, si vous voulez garder votre façon originale de travail, le bon style devrait être

#right { 
    width: 100vh; 
    background: teal; 
    right: 0px; 
    transform: translateX(50vh) translateZ(-50vh) rotateY(-90deg); 
} 

Notez que le positionnement à droite simplifie beaucoup le problème.