CSS transform rotateY旋转时实现方块始终显示同一面的纯CSS方案咨询

完全可以仅用纯CSS实现，核心思路是给每个子元素添加和父容器旋转同步反向的旋转动画，抵消父容器旋转带来的子元素角度变化，同时不会改动子元素初始的定位参数，不会出现位置重置问题。

具体修改点 #

• 给所有.box下的子div新增抵消旋转的动画，动画时长、速率和父容器的旋转动画完全一致，旋转方向相反
• 无需修改原有HTML结构和初始定位的transform属性

完整可运行代码 #

CSS代码 #

body {
  perspective: 1000px;
}

.box {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 150px auto;
  transform-style: preserve-3d;
  animation: move 10s linear infinite;
}

.box:hover {
  animation-play-state: paused;
}

/* 父容器旋转动画 */
@keyframes move {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: skyblue;
  /* 新增：子元素反向旋转动画，和父动画同步抵消角度 */
  animation: counterRotate 10s linear infinite;
  transform-style: preserve-3d;
}

/* 子元素反向旋转动画 */
@keyframes counterRotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(-360deg);
  }
}

/* 原有定位代码无需修改 */
.box div:first-child {
  transform: rotateY(0) translateZ(300px);
}

.box div:nth-child(2) {
  transform: rotateY(60deg) translateZ(300px);
}

.box div:nth-child(3) {
  transform: rotateY(120deg) translateZ(300px);
}

.box div:nth-child(4) {
  transform: rotateY(180deg) translateZ(300px);
}

.box div:nth-child(5) {
  transform: rotateY(240deg) translateZ(300px);
}

.box div:last-child {
  transform: rotateY(300deg) translateZ(300px);
}

HTML代码 #

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

原问题原因说明 #

你之前单独调整每个盒子的rotate属性时位置重置，是因为初始用来把盒子放到圆周对应位置的rotateY参数被覆盖了，修改后用独立的动画做反向旋转，不会影响初始定位用的transform值，就不会出现位置偏移。

内容的提问来源于stack exchange，提问作者Aurélie Brébant