修复了 CSS 3D 立方体旋转中的翻译

Question

我是 CSS 转换 3d 的新手，在 3d 立方体轮播上工作。我希望立方体在固定的div 内旋转，但不知何故它也沿 x 轴平移了一点。

.back, .carousel__slide:nth-child(3) {
  transform: translateZ(-7.5em) rotateY(180deg);
}
.right, .carousel__slide:nth-child(2) {
  transform: rotateY(-270deg) translateX(7.5em);
  transform-origin: top right;
}
.left, .carousel__slide:nth-child(4) {
  transform: rotateY(270deg) translateX(-7.5em);
  transform-origin: center left;
}
.front, .carousel__slide:nth-child(1) {
  transform: translateZ(7.5em);
}

https://jsfiddle.net/j2un66dt/3/

Answer 1

您可以通过设置来解决问题：

.carousel__slide {
     width: 100%;
}

如果要将宽度保持在 302px;只需将其设置为 100% 并将.carousel__slide放入宽度为 302px; 且没有填充的新div 中。