HTML和CSS（keyframes）实现旋转立方体时无法显示全部面的问题

问题根源 #

1. 正面与背面无法同时显示：背面元素的变换顺序错误，先旋转再平移会导致背面处于立方体内部，无法被正确渲染。
2. 后方多余元素：变换顺序错误导致面的位置偏移，产生视觉上的多余元素。

修正后的代码 #

CSS 代码

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  perspective: 1000px;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}

.cube__face {
  width: 200px;
  height: 200px;
  position: absolute;
  backface-visibility: hidden;
}

.cube__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* 修正背面的变换顺序：先平移再旋转 */
.cube__face--back {
  transform: translateZ(100px) rotateY(180deg);
}

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

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

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

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

@keyframes rotate {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

/* 可选额外样式 */
body {
  background-color: #f5f5f5;
}

.container {
  margin: 20px;
  border: 1px solid #ddd;
}

.cube__face {
  border: 1px solid #ccc;
}

HTML 代码（无需修改）

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cubo Giratório com Animação</title>
  <link rel="stylesheet" href="rotate.css">
</head>

<body>
  <div class="container">
    <div class="cube">
      <div class="cube__face cube__face--front">
        <img src="https://upload.wikimedia.org/wikipedia/en/f/f0/My_Beautiful_Dark_Twisted_Fantasy.jpg?20121001043838" alt="Álbum 1">
      </div>
      <div class="cube__face cube__face--back">
        <img src="https://upload.wikimedia.org/wikipedia/en/7/70/Graduation_%28album%29.jpg?20170208193846" alt="Álbum 2">
      </div>
      <div class="cube__face cube__face--right">
        <img src="https://upload.wikimedia.org/wikipedia/en/f/f4/Late_registration_cd_cover.jpg?20240110000430" alt="Álbum 3">
      </div>
      <div class="cube__face cube__face--left">
        <img src="https://upload.wikimedia.org/wikipedia/en/a/a3/Kanyewest_collegedropout.jpg?20210524152751" alt="Álbum 4">
      </div>
      <div class="cube__face cube__face--top">
        <img src="https://upload.wikimedia.org/wikipedia/en/0/03/Yeezus_album_cover.png?20150701205042" alt="Álbum 5">
      </div>
      <div class="cube__face cube__face--bottom">
        <img src="https://upload.wikimedia.org/wikipedia/en/4/4d/The_life_of_pablo_alternate.jpg?20170721000912" alt="Álbum 6">
      </div>
    </div>
  </div>
</body>

</html>

关键修改说明 #

• 背面变换顺序调整：将 .cube__face--back 的变换从 rotateY(180deg) translateZ(-100px) 改为 translateZ(100px) rotateY(180deg)。CSS 变换顺序从右到左生效，先执行 translateZ(100px) 把背面放到立方体外侧，再执行 rotateY(180deg) 翻转，确保背面处于正确位置且能被正常渲染。
• 保留 backface-visibility: hidden 可避免面的背面被看到，减少视觉干扰。

内容的提问来源于stack exchange，提问作者PM92