javascript - CSS 3D 変換

Question

（前へ）ボタンと（次へ）ボタンを使用してうまく機能しているカルーセルがあります。私が抱えている問題は、回転すると一箇所にとどまらないという事実です。そのため、前へボタンと次へボタンを使用してカルーセルをクリックすることはできますが、カルーセルは左から右へ、またその逆へと移動しています。カルーセルを所定の位置で回転させるにはどうすればよいですか? 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 );
}