Rotator

dabblet.css

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

.bones .stage {overflow: visible;}
.bones [class^=carousel] {background: rgba(1,1,1,.2);}

.header {width: 700px;margin: 50px auto; }
.controls {position: relative; margin-top: 1em; z-index: 6;}

/* Stage */
@keyframes stage {
      from {background-color: #ccc;}  /* Slide 1 / Start */
     20.0% {background-color: #ccc;}
     22.5% {background-color: #ccc;}
     25.0% {background-color: #f90;}    /* Slide 2 */
     47.5% {background-color: #f90;}
     50.0% {background-color: #0f0;}    /* Slide 3 */
     72.5% {background-color: #0f0;}
     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; position: relative; z-index: 5; border-radius: 4px; animation: stage 15s 0s infinite;}

[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="header">
     <div class="stage adventures-stage" id="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>
    <p class="controls">
        <input type="checkbox" id="bones"> Show bones<br>
        <button id="playpause">Pause</button>
    </p>
</div>​

settings.json

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