3D Cuboid面對齊css

Question

我想使用HTML/CSS做一個響應長方體，但長方體的右臉不與其餘面對齊。 任何人都可以幫我解決這個問題嗎？

我粘貼的jsfiddle鏈接相同，如下所示：

#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

這裏是響應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

我已經改變了移動元素的方式，它更容易改變變換翻譯起源：

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>

在一個側面說明，你都在問：

左臉上，當我使用 '平移（-50vh）'，它完全對齊。但我覺得它應該與'translateX（-50vw）'一致。 '-50vh'如何足夠？

左側的寬度爲100vh。轉換原點位於中心位置，因此90deg的旋轉圍繞元素左邊界右側的50vh（100vh的一半）點進行。爲了使它合適，你需要翻譯X減去這個數量。

另外，如果你想保持你原來的工作方式，正確的風格應該是

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

注意，它定位到合適的簡化了很多問題。