Question

我需要实现一个子程序，在没有人为干预的情况下继续旋转它们。那会是可能的吗？这是一个3D旋转木马。 My code is here,.

CSS

.container { 宽度：210px; 身高：140px; 位置：相对; 保证金：0自动40px; border：1px solid #CCC; -webkit-perspective：1100px; -moz-perspective：1100px; -o-perspective：1100px; 观点：1100px; }

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform: translateZ( -288px );
     -moz-transform: translateZ( -288px );
       -o-transform: translateZ( -288px );
          transform: translateZ( -288px );
  -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(  40, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(3) { background: hsla(  80, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(4) { background: hsla( 120, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(5) { background: hsla( 160, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(6) { background: hsla( 200, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(7) { background: hsla( 240, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(8) { background: hsla( 280, 100%, 50%, 0.8 ); }
#carousel figure:nth-child(9) { background: hsla( 320, 100%, 50%, 0.8 ); }

#carousel figure:nth-child(1) {
  -webkit-transform: rotateY(   0deg ) translateZ( 288px );
     -moz-transform: rotateY(   0deg ) translateZ( 288px );
       -o-transform: rotateY(   0deg ) translateZ( 288px );
          transform: rotateY(   0deg ) translateZ( 288px );
}
#carousel figure:nth-child(2) {
  -webkit-transform: rotateY(  40deg ) translateZ( 288px );
     -moz-transform: rotateY(  40deg ) translateZ( 288px );
       -o-transform: rotateY(  40deg ) translateZ( 288px );
          transform: rotateY(  40deg ) translateZ( 288px );
}
#carousel figure:nth-child(3) {
  -webkit-transform: rotateY(  80deg ) translateZ( 288px );
     -moz-transform: rotateY(  80deg ) translateZ( 288px );
       -o-transform: rotateY(  80deg ) translateZ( 288px );
          transform: rotateY(  80deg ) translateZ( 288px );
}
#carousel figure:nth-child(4) {
  -webkit-transform: rotateY( 120deg ) translateZ( 288px );
     -moz-transform: rotateY( 120deg ) translateZ( 288px );
       -o-transform: rotateY( 120deg ) translateZ( 288px );
          transform: rotateY( 120deg ) translateZ( 288px );
}
#carousel figure:nth-child(5) {
  -webkit-transform: rotateY( 160deg ) translateZ( 288px );
     -moz-transform: rotateY( 160deg ) translateZ( 288px );
       -o-transform: rotateY( 160deg ) translateZ( 288px );
          transform: rotateY( 160deg ) translateZ( 288px );
}
#carousel figure:nth-child(6) {
  -webkit-transform: rotateY( 200deg ) translateZ( 288px );
     -moz-transform: rotateY( 200deg ) translateZ( 288px );
       -o-transform: rotateY( 200deg ) translateZ( 288px );
          transform: rotateY( 200deg ) translateZ( 288px );
}
#carousel figure:nth-child(7) {
  -webkit-transform: rotateY( 240deg ) translateZ( 288px );
     -moz-transform: rotateY( 240deg ) translateZ( 288px );
       -o-transform: rotateY( 240deg ) translateZ( 288px );
          transform: rotateY( 240deg ) translateZ( 288px );
}
#carousel figure:nth-child(8) {
  -webkit-transform: rotateY( 280deg ) translateZ( 288px );
     -moz-transform: rotateY( 280deg ) translateZ( 288px );
       -o-transform: rotateY( 280deg ) translateZ( 288px );
          transform: rotateY( 280deg ) translateZ( 288px );
}
#carousel figure:nth-child(9) {
  -webkit-transform: rotateY( 320deg ) translateZ( 288px );
     -moz-transform: rotateY( 320deg ) translateZ( 288px );
       -o-transform: rotateY( 320deg ) translateZ( 288px );
          transform: rotateY( 320deg ) translateZ( 288px );
}

HTML

 <h1>Carousel 1</h1>

  <section class="container">
    <div id="carousel">
      <figure>1</figure>
      <figure>2</figure>
      <figure>3</figure>
      <figure>4</figure>
      <figure>5</figure>
      <figure>6</figure>
      <figure>7</figure>
      <figure>8</figure>
      <figure>9</figure>
    </div>
  </section>

Answer 1

是的，有可能。使用关键帧或步骤（但步骤将失去转换）。

http://jsfiddle.net/P5295/

@-webkit-keyframes spin {

    0% {-webkit-transform: rotateY(0deg)}
    11.1% {-webkit-transform: rotateY(-40deg)}
    22.2% {-webkit-transform: rotateY(-80deg)}
    33.3% {-webkit-transform: rotateY(-120deg)}
    44.4% {-webkit-transform: rotateY(-160deg)}
    55.5% {-webkit-transform: rotateY(-200deg)}
    66.6% {-webkit-transform: rotateY(-240deg)}
    77.7% {-webkit-transform: rotateY(-280deg)}
    88.8% {-webkit-transform: rotateY(-320deg)}
    100% {-webkit-transform: rotateY(-360deg)}
}
#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform: translateZ( -288px );
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform .125s;
  -webkit-animation: spin 20s  infinite;

}

请注意，这段代码和我的小提琴只适用于chrome，因为我不想写所有供应商前缀，你可以自己添加-moz-， - o-和无前缀版本

使用CSS3，HTML5和js操纵3D轮播

1 个答案: