Rotator

dabblet.css

/**
 * Rotator
 */
body {font-family: Arial Rounded MT Bold; color: #333;}
h2 { font-weight: normal;}

/* Stage */
@keyframes stage {
      from {background-color: #ccc;}  /* Slide 1 / Start */
     20.0% {background-color: #ccc;}
     22.5% {background-color: #ccc;}
     25.0% {background-color: #666;}	/* Slide 2 */
     47.5% {background-color: #666;}
     50.0% {background-color: #333;}	/* Slide 3 */
     72.5% {background-color: #333;}
     75.0% {background-color: #222;} 	/* Slide 4 */
     97.5% {background-color: #222;}    
      	to {background-color: #ccc;}	/* Reset */
}

.stage {overflow: hidden; border: 1px solid #222; height: 300px; width: 700px; margin: 50px auto; position: relative; z-index: 5; border-radius: 4px; animation: stage 15s 0s infinite;}
.rough .stage {overflow: visible;}

[class^=slide] {box-sizing: border-box; position: absolute; transition: .2s all ease 0; padding: 20px;}

/* Primary rotating element */
@keyframes carousel-1 {
      from {transform: rotate(0deg);} 		/* Slide 1 / Start */
     20.0% {transform: rotate(0deg);}
     22.5% {transform: rotate(0deg);}
     25.0% {transform: rotate(-90deg);} 	/* Slide 2 */
     47.5% {transform: rotate(-90deg);}
     50.0% {transform: rotate(-180deg);}	/* Slide 3 */
     72.5% {transform: rotate(-180deg);}
     75.0% {transform: rotate(-270deg);} 	/* Slide 4 */
     97.5% {transform: rotate(-270deg);}    
      	to {transform: rotate(-360deg);}	/* Reset */
}

.carousel-1 {height: 1200px; width: 1200px; position: absolute; z-index: -1; animation: carousel-1 15s 0s infinite;}

.carousel-1 .slide-1 {z-index: 4; width: 300px; height: 300px; top: 0; left: 0; background: rgba(255,0,255,.7);}
.carousel-1 .slide-2 {z-index: 3; width: 300px; height: 300px; top: 0; right: 0; background: rgba(58,244,58,.7); transform: rotate(90deg);}
.carousel-1 .slide-3 {z-index: 2; width: 300px; height: 300px; bottom: 0; right: 0; background: rgba(51,85,188,.7); transform: rotate(180deg);}
.carousel-1 .slide-4 {z-index: 1; width: 300px; height: 300px; bottom: 0; left: 0; background: rgba(255,252,0,.7); transform: rotate(270deg);}

/* Secondary rotating element */

@keyframes carousel-2 {
      from {transform: translate(0,0);} 		/* Slide 1 / Start */
     20.0% {transform: translate(0,0);}
     22.5% {transform: translate(0,0);}
     25.0% {transform: translate(400px,-310px);} 	/* Slide 2 */
     47.5% {transform: translate(400px,-310px);}
     50.0% {transform: translate(-300px,-500px);}	/* Slide 3 */
     72.5% {transform: translate(-300px,-500px);}
     75.0% {transform: translate(400px,-820px);} 	/* Slide 4 */
     97.5% {transform: translate(400px,-820px);}    
      	to {transform: translate(0,0);}			/* Reset */
}

.carousel-2 {height: 1000px; width: 1000px; position: absolute; z-index: 1; /*background: rgba(0,0,0,.3);*/ animation: carousel-2 15s 0s infinite;}

.carousel-2 .slide-1 {z-index: 4; width: 300px; height: 300px; top: 0; right: 300px; background: rgba(255,0,255,.7);}
.carousel-2 .slide-2 {z-index: 3; width: 300px; height: 300px; top: 310px; left: 0; background: rgba(58,244,58,.7);}
.carousel-2 .slide-3 {z-index: 2; width: 300px; height: 300px; top: 500px; right: 0; background: rgba(51,85,188,.7);}
.carousel-2 .slide-4 {z-index: 1; width: 300px; height: 300px; top: 820px; left: 0; background: rgba(255,252,0,.7);}
​
/* Rough outline mode */

.stage.rough {overflow: visible !important;}
.rough [class^=carousel] {background: rgba(255,150,0,.5);}

dabblet.html

<div class="">
     <div class="stage">
         <div class="carousel-1">
             <div class="slide-1">
                 <h2>Slide 1a</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing eli.</p>
             </div>
             <div class="slide-2">
                 <h2>Slide 2a</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing eli.</p>
             </div>
             <div class="slide-3">
                 <h2>Slide 3a</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing eli.</p>
             </div>
             <div class="slide-4">
                 <h2>Slide 4a</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing eli.</p>
             </div>
         </div>
         <div class="carousel-2">
             <div class="slide-1">
                 <h2>Slide 1b</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing eli.</p>
             </div>
             <div class="slide-2">
                 <h2>Slide 2b</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing eli.</p>
             </div>
             <div class="slide-3">
                 <h2>Slide 3b</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing eli.</p>
             </div>
             <div class="slide-4">
                 <h2>Slide 4b</h2>
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing eli.</p>
             </div>
         </div>
     </div>​
</div>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"css"}