Carousel css - 在中心旋转并拥有一个

Question

旋转木马在盒子左侧的某处旋转。如何让div围绕自己的轴旋转？

https://code pen.io/whiskaso/pen/zYmKBMQ

尝试将所有值设置为宽度、边距，但找不到应该设置的位置。

Answer 1

<style>.partners__logos {
  margin: 0;
  background: lightgray;
  text-align: center;
  font-family: sans-serif;
  color: #fefefe;
  height: 300px;
}

.container {
  position: relative;
  margin: auto;
  perspective: 1000px;
}

.carousel {
  position: absolute;
  height: 10%;
  left: 50%;
  transform-style: preserve-3d;
  transform-origin: center;
  animation: rotate360 16s infinite forwards linear;
}

.carousel__face {
  position: absolute;
  width: 150px;
  height: 87px;
  
  top: 20px;
  display: flex;
  background-color: black;
}

.carousel__face:nth-child(1) {
  transform: rotateY(0deg) translateZ(220px);
}
.carousel__face:nth-child(2) {
  transform: rotateY(40deg) translateZ(220px);
}
.carousel__face:nth-child(3) {
  transform: rotateY(80deg) translateZ(220px);
}
.carousel__face:nth-child(4) {
  transform: rotateY(120deg) translateZ(220px);
}
.carousel__face:nth-child(5) {
  transform: rotateY(160deg) translateZ(220px);
}
.carousel__face:nth-child(6) {
  transform: rotateY(200deg) translateZ(220px);
}
.carousel__face:nth-child(7) {
  transform: rotateY(240deg) translateZ(220px);
}
.carousel__face:nth-child(8) {
  transform: rotateY(280deg) translateZ(220px);
}
.carousel__face:nth-child(9) {
  transform: rotateY(320deg) translateZ(220px);
}

@keyframes rotate360 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}
}</style>

我在.carousel中添加了

left: 50%;

，然后旋转木马开始在中心旋转，我希望这就是你想要的。