修复CSS 3d Cube旋转中的翻译

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中。< / p>