Question

我正在为我的投资组合网站设计一个旋转立方体徽标。经过一整夜的尝试，由于某种原因，我的3D立方体徽标不再是立方体。两个问题：

立方体的形状变形。 .front div大于该多维数据集的所有其他div。我不明白为什么会这样。
当.container div的动画被注释掉时，您会注意到查看器位置朝上。我需要使视图位置更加“等距”，就像观察者从上方看立方体的边缘一样。我尝试旋转.container div的Z轴和Y轴来实现这一点，但到目前为止还算不上运气。在background-color: pink; div上取消对.container的注释，以查看此内容。
我感觉上面的问题与perspective属性有关。我不确定如何在此处计算正确的角度，这可能是我的问题。

HTML：

<div class="container">
    <div class="cube">
      <div class="front"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
      <div class="back"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
      <div class="left"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
      <div class="right"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
      <div class="top"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
      <div class="bottom"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
    </div>
</div>

CSS：

html {
  background: #666;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

.container {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  width: 400px;
  height: 400px;
/*   background-color: pink; */
  transform-style: preserve-3d;
  perspective: 1000px;
  animation: rotate 2000ms linear infinite;
}

.cube {
/*  background-color: blue; */
 width: 200px;
 height: 200px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -100px;
 margin-top: -100px;
 transform-style: preserve-3d;
}

.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 5px solid #ccc;
  box-sizing: border-box;
  background-size: cover;
}

.cube img {
  width: 100%;
  opacity: 1;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: rotateY(180deg) translateZ(100px);
}

.left {
  transform: rotateY(-90deg) translateZ(100px);
}

.right {
  transform: rotateY(90deg) translateZ(100px);
}

.top {
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

Answer 1

存在一个问题，因为您同时旋转了容器及其透视图。

您想对多维数据集有一个透视图，必须在perspective元素（或动画本身没有进行动画处理的任何类型的容器）上设置body属性，并避免将其设置为动画元素。实际上，移动由perspective值设置的元素将在3D元素内移动该3D元素-它自己的父元素。这会导致您的示例出现奇怪的多维数据集渲染。

此外，如果您想控制预期的原点，则可以使用perspective-origin来确定查看者所看的位置。与perspective属性相关联，您将能够控制整个渲染的场景。

因此，结果将通过以下代码更改：

html { background: #666; }

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  perspective: 900px;
  perspective-origin: bottom;
}

.container {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
  animation: rotate 2000ms linear infinite;
}

.cube {
 width: 200px;
 height: 200px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-left: -100px;
 margin-top: -100px;
 transform-style: preserve-3d;
}

.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 5px solid #ccc;
  box-sizing: border-box;
  background-size: cover;
}

.cube img { 
  width: 100%; 
}

.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

@keyframes rotate {
  to { transform: rotateY(360deg); }
}

<body>
  <div class="container">
    <div class="cube">
      <div class="front"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
      <div class="back"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
      <div class="left"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
      <div class="right"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
      <div class="top"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
      <div class="bottom"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
    </div>
  </div>
</body>

为什么3D立方体面会变形？

1 个答案: