html - 如何使 3D div 变大？

Question

我有一个 3D cube div ，在 CSS 中为 200px x 200px，但是当我尝试将其变大时，只显示一侧。我试过让所有边的宽度和高度相同，但其他边仍然没有显示。 下面是立方体的样子

body {
  padding: 0;
  margin: 0;
}
.container {
  perspective: 800;
  width: 100%;
  height: 100vh;
  background: #010101;
}
.cube {
  position: relative;
  top: 160px;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  animation: spin 9s infinite linear;
  transform-style: preserve-3d;
  opacity: .8;
}
@keyframes spin {
  from {
    transform: rotateY(0) rotateX(0);
  }
  to {
    transform: rotateY(-360deg) rotateX(360deg);
  }
}
.cube > div {
  position: absolute;
  width: 200px;
  height: 200px;
}
.one {
  transform: rotateX(90deg) translateZ(100px);
  background-color: #E349BB;
}
.two {
  transform: translateZ(100px);
  background-color: #BB493E;
}
.three {
  transform: rotateY(90deg) translateZ(100px);
  background-color: #f00de7;
}
.four {
  transform: rotateY(180deg) translateZ(100px);
  background-color: #dec011;
}
.five {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: #bac35d;
}
.six {
  transform: rotateX(-90deg) translateZ(100px);
  background-color: #E349BB;
}
h1,
p {
  text-align: center;
}

<div class="container">
  <div class="cube">
    <div class="one">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>
    <div class="two">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>
    <div class="three">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>
    <div class="four">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>
    <div class="five">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>
    <div class="six">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>

  </div>

</div>

Answer 1

您必须将每个页面的 transform 属性的 translateZ() 设置为边长的一半，例如translateZ(150px) 边长为 300px。是6个侧面到中心的距离。

body {
  padding: 0;
  margin: 0;
}
.container {
  perspective: 800;
  width: 100%;
  height: 100vh;
  background: #010101;
}
.cube {
  position: relative;
  top: 160px;
  margin: 0 auto;
  height: 300px;
  width: 300px;
  animation: spin 9s infinite linear;
  transform-style: preserve-3d;
  opacity: .8;
}
@keyframes spin {
  from {
    transform: rotateY(0) rotateX(0);
  }
  to {
    transform: rotateY(-360deg) rotateX(360deg);
  }
}
.cube > div {
  position: absolute;
  width: 300px;
  height: 300px;
}
.one {
  transform: rotateX(90deg) translateZ(150px);
  background-color: #E349BB;
}
.two {
  transform: translateZ(150px);
  background-color: #BB493E;
}
.three {
  transform: rotateY(90deg) translateZ(150px);
  background-color: #f00de7;
}
.four {
  transform: rotateY(180deg) translateZ(150px);
  background-color: #dec011;
}
.five {
  transform: rotateY(-90deg) translateZ(150px);
  background-color: #bac35d;
}
.six {
  transform: rotateX(-90deg) translateZ(150px);
  background-color: #E349BB;
}
h1,
p {
  text-align: center;
}

<div class="container">
  <div class="cube">
    <div class="one">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>
    <div class="two">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>
    <div class="three">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>
    <div class="four">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>
    <div class="five">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>
    <div class="six">
      <h1>Arun Pattni</h1>
      <p>Coder:
        <br>Web Design
        <br>Web Development
        <br>Java
        <br>Mobile Web Apps</p>
    </div>

  </div>

</div>