时间戳

首页 > 解决方案 > 将 4 面立方体转换为 3 面

html - 将 4 面立方体转换为 3 面

问题描述

我正在尝试创建一个具有旋转立方体效果的“3 照片立方体”。找到了一个非常有用的代码笔，它创建了具有 4 个面的立方体，并进行了旋转和并排停止，这正是我想要的。

这里的问题是我需要立方体只显示 3 面而不是 4 面，当我移除其中一个时，它仍然在那一边旋转。

我认为我应该只“匹配”顶部底部，这样背面就不会显示，但似乎我对了解定位的工作原理有一点了解。

请参阅下面的代码段。

.scene {
  width: 416px;
  height: 500px;
  margin: 75px auto 0;
  perspective: 1200px;
}

.cube {
  position: relative;
  width: 416px;
  height: 500px;
  transform-style: preserve-3d;
  transform: translateZ(0px) rotateX(150deg);
  animation: example 15s linear infinite;
}

.side {
  position: absolute;
  width: 416px;
  height: 500px;
  box-sizing: border-box;
  background-color: #999;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 120px 0;
  font: 50px/1 'Trebuchet MS', sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.side::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
}
.side span {
  position: relative;
}

.guides {
  position: absolute;
  top: 0;
  left: 50px;
  width: 200px;
  height: 100%;
  border-style: dotted;
  border-width: 0 1px;
  color: rgba(255, 255, 255, 0.6);
}
.guides::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  border-left: 1px dotted;
}

.back {
  transform: translateZ(-250px) rotateX(180deg);
}
.bottom {
  transform: translateY(250px) rotateX(270deg);
}
.front {
  transform: translateZ(250px);
}

.top {
  background-image: url(https://askd.github.io/codepen/top.jpg);
}
.back {
  background-image: url(http://keit.rezsolution.com/wp-content/uploads/2019/07/rimodelimi-i-hundes-galeri.jpg);
}
.bottom {
  background-image: url(http://keit.rezsolution.com/wp-content/uploads/2019/07/foto-galeri-zmadhimi-i-gjoksit.jpg);
}
.front {
  background-image: url(http://keit.rezsolution.com/wp-content/uploads/2019/07/barku-home.jpg);
}

@keyframes example {
  0% { transform: translateZ(-150px) rotateX(0deg); }
	15% { transform: translateZ(-150px) rotateX(90deg); }
	25% { transform: translateZ(-150px) rotateX(90deg); }
	40% { transform: translateZ(-150px) rotateX(180deg); }
	50% { transform: translateZ(-150px) rotateX(180deg); }
	65% { transform: translateZ(-150px) rotateX(270deg); }
	75% { transform: translateZ(-150px) rotateX(270deg); }
	90% { transform: translateZ(-150px) rotateX(360deg); }
	100% { transform: translateZ(-150px) rotateX(360deg); }
}
<div class="scene">
  <div class="cube">
    <div class="side back">
      <span>BACK</span>
    </div>
    <div class="side bottom">
      <span>BOTTOM</span>
    </div>
    <div class="side front">
      <span>FRONT</span>
    </div>
  </div>
</div>

任何人都可以就如何解决这个问题给我一些指导？

任何帮助表示赞赏

标签： htmlcss

解决方案

我在这里做了一个旋转棱镜（Y 轴）的工作示例。和这里
的 X 轴一样。 有两件事要弄清楚，平移每个面的距离和旋转角度。 距离回到三角函数，这让我的大脑有点受伤，但为了简单起见，在这种情况下，你可以通过以下方式得到它：translationDistance = (faceWidth/2) / tan(30)。有关更多解释，请参阅David DeSandro的这篇文章。 在我的代码中：





--cotetriangle: 200px;
/* r = 100 / tan(30) = 57.7 */
--translationDistance: 58px;

旋转角度很简单，3 个面，每次旋转 360 度 -> 120 度。
这给了你：

.triangle-face-front {
  background: rgb(71, 71, 136);
  transform: translate3d(0, 0, var(--translationDistance));
}

.triangle-face-left {
  background: rgb(90, 233, 77);
  transform: rotateY(-120deg) translate3d(0, 0, var(--translationDistance));
}

.triangle-face-right {
  background: black;
  transform: rotateY(120deg) translate3d(0, 0, var(--translationDistance));
}

按照您的建议，我做了一个“暂停”动画：

@keyframes rotateTriangle {
  0% {
    transform: rotateY(0deg);
  }
  24%,34%{
    transform: rotateY(120deg);
  }
  58%,67%{
    transform: rotateY(240deg);
  }
  91%, 100% {
    transform: rotateY(360deg);
  }

要在横向旋转（上面的代码）和正面旋转之间切换，您只需替换rotateY为rotateX
为了更好地理解 CSS 3D，我鼓励您阅读这两篇文章：

推荐阅读