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

我已经改变了移动元素的方法，更容易更改要使用翻译的变换原点：

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>

在旁注中，您要问：

对于左脸，当我使用'translateX（-50vh）'时，它完全对齐。但我觉得它应该与'translateX（-50vw）'保持一致。 '-50vh'如何足够？

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

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

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

请注意，将其放在右侧可以简化问题。

Answer 2

这是响应式3D Cuboid面孔：

	#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

2 个答案: