Rotator

dabblet.css

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

.outline {overflow: hidden;}
.adventures-stage {overflow: hidden; border: 1px solid #222; height: 300px; width: 700px; margin: 50px auto; position: relative; z-index: 5; border-radius: 4px;}

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

/* Primary rotating element */
@-webkit-keyframes carousel1 {
      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 */
}

#carousel1 {height: 1200px; width: 1200px; position: absolute; z-index: -1;  /*background: rgba(255,150,0,.5);*/ animation: carousel1 15s 0s infinite;}

#carousel1 .slide-1 {z-index: 4; width: 300px; height: 300px; top: 0; left: 0; background: rgba(255,0,255,.7);}
#carousel1 .slide-2 {z-index: 3; width: 300px; height: 300px; top: 0; right: 0; background: rgba(58,244,58,.7); transform: rotate(90deg);}
#carousel1 .slide-3 {z-index: 2; width: 300px; height: 300px; bottom: 0; right: 0; background: rgba(51,85,188,.7); transform: rotate(180deg);}
#carousel1 .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 */

@-webkit-keyframes carousel2 {
      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(-100px,-500px);}	/* Slide 3 */
     72.5% {transform: translate(-100px,-500px);}
     75.0% {transform: translate(400px,-820px);} 	/* Slide 4 */
     97.5% {transform: translate(400px,-820px);}    
      	to {transform: translate(0,0);}			/* Reset */
}

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

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

dabblet.html

<div class="adventures-stage rough">
    <div id="carousel1">
        <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 id="carousel2">
        <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>​

settings.json

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