CODEWITHSUNDEEP
htmlcss
user3511559
user3511559

Reputation: 11

Manipulate a 3D carousel using CSS3, HTML5 and js

I need to implement a subroutine that will keep rotating them without human intervention. Would that be at all possible. It is a 3d carousel. My code is here,.

CSS

.container { width: 210px; height: 140px; position: relative; margin: 0 auto 40px; border: 1px solid #CCC; -webkit-perspective: 1100px; -moz-perspective: 1100px; -o-perspective: 1100px; perspective: 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>

Upvotes: 1

Views: 1905

Answers (1)

Jonas Grumann
Jonas Grumann

Reputation: 10786

Yes, it is possible. Using keyframes or steps (but with steps you'll lose transitioning).

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;

}

Please note, this code, and my fiddle, only work on chrome because I didn't want to write all the vendor prefixes, you can add -moz-, -o- and the unprefixed version on your own

Upvotes: 2

Related Questions