3D 长方体人脸对齐 css

Question

我正在尝试使用 HTML/CSS 制作响应式长方体，但长方体的右面未与其余面对齐。谁能帮我解决这个问题？

我正在粘贴一个 jsfiddle link 同样的，如下：

#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

我改变了移动元素的方式，更容易改变要玩的转换原点：

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>

在旁注中，您在问：

For left face, when I use 'translateX(-50vh)', it aligns perfectly. But I felt that it should have aligned on 'translateX(-50vw)'. How '-50vh' is sufficient?

左侧的宽度为 100vh。变换原点是中心，因此 90 度的旋转是围绕元素左边界右侧 50vh（100vh 的一半）的点进行的。为了使其适合，您需要在 X 减去这个量后进行翻译。

另外，如果你想保持原来的工作方式，正确的风格应该是

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

请注意，将其置于右侧可以简化很多问题。

Answer 2

这是响应式 3D 长方体面：

 #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(0%) rotateY(-90deg);
    right: 0px;
    TRANSFORM-ORIGIN: 100% 100% !important;
}
 #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>

3D 长方体人脸对齐 css

3D Cuboid face alignment css

html

css

css-shapes