如何在保持立方体完整的同时改变立方体的像素尺寸？答案

【问题标题】：How to change the pixel dimensions of the cube while keeping the cube intact?如何在保持立方体完整的同时改变立方体的像素尺寸？
【发布时间】：2019-10-19 09:15:58
【问题描述】：

我正在尝试将立方体尺寸更改为 300x250 像素，但是每当我这样做时，立方体面就会开始重叠。我如何能够更改翻译值以实现这一目标？

我尝试将 CSS 中的翻译值更改为百分比，但也无法正常工作。

这是我的 Codepen

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container .cube-container {
perspective: 800px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container .cube-container .cube {
transition: transform 2s ease-in;
transform-style: preserve-3d;
width: 150px;
height: 150px;
margin: 50px 0;
}

.box {
width: 100%;
height: 100%;
position: absolute;
color: white;
text-transform: uppercase;
letter-spacing: 0.08em;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 500;
display: flex;
justify-content: center;
align-items: center;
}

.box.front {
background: #40b9dc;
transform: translateZ(75px);
}

.box.back {
background: #3dbadf;
transform: translateZ(-75px) rotateY(180deg);
}

.box.top {
 background: #5acaec;
 transform: rotateX(-90deg) translateY(-75px);
 transform-origin: top center;
}

.box.bottom {
background: #82daf4;
transform: rotateX(90deg) translateY(75px);
transform-origin: bottom center;
}

.box.left {
background: #a3e5f9;
transform: rotateY(270deg) translateX(-75px);
transform-origin: center left;
}

.box.right {
background: #67d6f7;
transform: rotateY(-270deg) translateX(75px);
transform-origin: top right;
}

谢谢！

【问题讨论】：

我的回答对你有帮助吗？

标签： css 3d transform css-transforms gsap

【解决方案1】：

我已对您的代码笔进行了一些编辑，希望对您有所帮助： https://codepen.io/anon/pen/Mdxebo 我认为我所做的主要内容是，如果您的立方体不均匀，顶部和底部面板都需要不同的高度值。

.box.top {
  height: 84%;

  background: #5acaec;
  transform: rotateX(-90deg) translateY(-75px);
  transform-origin: top center;
}

.box.bottom {
  height: 84%;

  background: #82daf4;
  transform: rotateX(90deg) translateY(75px) translateZ(-48px);
  transform-origin: bottom center;
}

【讨论】：