0

我有一个旋转木马，使用（上一个）和（下一个）按钮效果很好。我遇到的问题是，当它旋转时，它不会停留在一个地方。因此，您可以使用上一个和下一个按钮单击轮播，但轮播会从左到右再向后移动。你如何使旋转木马旋转到位？我假设它与x轴有关？代码的哪一部分（CSS 或 JavaScript）使轮播旋转到位？

<style media="screen">

.containercaro {
  width: 210px;
  height: 140px;
  position: relative;
  margin: 0 auto 40px;
  -webkit-perspective: 1100px;
     -moz-perspective: 1100px;
       -o-perspective: 1100px;
          perspective: 1100px;
}

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform: translateZ( -182px );
     -moz-transform: translateZ( -182px );
       -o-transform: translateZ( -182px );
          transform: translateZ( -182px );
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
}

#carousel figure {
  display: block;
  position: absolute;
  width: 186px;
  height: 116px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
  line-height: 116px;
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-align: center;
}

#carousel figure:nth-child(1) { background: hsla(   0, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(2) { background: hsla(  60, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(3) { background: hsla( 120, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(4) { background: hsla( 180, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(5) { background: hsla( 240, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(6) { background: hsla( 300, 100%, 50%, 0.8 ); }


#carousel figure:nth-child(1) {
  -webkit-transform: rotateY(   0deg ) translateZ( 182px );
     -moz-transform: rotateY(   0deg ) translateZ( 182px );
       -o-transform: rotateY(   0deg ) translateZ( 182px );
          transform: rotateY(   0deg ) translateZ( 182px );
}
#carousel figure:nth-child(2) {
  -webkit-transform: rotateY(  60deg ) translateZ( 182px );
     -moz-transform: rotateY(  60deg ) translateZ( 182px );
       -o-transform: rotateY(  60deg ) translateZ( 182px );
          transform: rotateY(  60deg ) translateZ( 182px );
}
#carousel figure:nth-child(3) {
  -webkit-transform: rotateY(  120deg ) translateZ( 182px );
     -moz-transform: rotateY(  120deg ) translateZ( 182px );
       -o-transform: rotateY(  120deg ) translateZ( 182px );
          transform: rotateY(  120deg ) translateZ( 182px );
}
#carousel figure:nth-child(4) {
  -webkit-transform: rotateY( 180deg ) translateZ( 182px );
     -moz-transform: rotateY( 180deg ) translateZ( 182px );
       -o-transform: rotateY( 180deg ) translateZ( 182px );
          transform: rotateY( 180deg ) translateZ( 182px );
}
#carousel figure:nth-child(5) {
  -webkit-transform: rotateY( 240deg ) translateZ( 182px );
     -moz-transform: rotateY( 240deg ) translateZ( 182px );
       -o-transform: rotateY( 240deg ) translateZ( 182px );
          transform: rotateY( 240deg ) translateZ( 182px );
}
#carousel figure:nth-child(6) {
  -webkit-transform: rotateY( 300deg ) translateZ( 182px );
     -moz-transform: rotateY( 300deg ) translateZ( 182px );
       -o-transform: rotateY( 300deg ) translateZ( 182px );
          transform: rotateY( 300deg ) translateZ( 182px );
}

4

0 回答 0