Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

<section id="options">
    <nav id="navigation">
      <button id="previous" class="btn" data-increment="-1">Previous</button>
      <button id="next" class="btn" data-increment="1">Next</button>
<section class="container">
  <div id="carousel">
    <figure class="cover"></figure>
    <figure class="region"></figure>
    <figure class="region"></figure>
    <figure class="region"></figure>
    <figure class="region"></figure>
    <figure class="region"></figure>
    <figure class="region"></figure>
    <figure class="region"></figure>
    <figure class="region"></figure>

<div id="content"> 
  <p><span class="first">F</span>ar out in the uncharted backwaters of the unfashionable  end  of
the  western  spiral  arm  of  the Galaxy lies a small unregarded
yellow sun.</p>	
  <p>Orbiting this at a distance of roughly ninety-two  million  miles
is  an  utterly insignificant little blue green planet whose ape-
descended life forms are so amazingly primitive that  they  still
think digital watches are a pretty neat idea.</p>
  <p>This planet has - or rather had - a problem, which was this: most
of  the  people  on  it were unhappy for pretty much of the time.
Many solutions were suggested for this problem, but most of these
were  largely  concerned with the movements of small green pieces
of paper, which is odd because on the whole it wasn't  the  small
green pieces of paper that were unhappy.</p>
  <p>And so the problem remained; lots of the people  were  mean,  and
most of them were miserable, even the ones with digital watches.</p>
  <p>Many were increasingly of the opinion that they'd all made a  big
mistake  in  coming  down  from the trees in the first place. And
some said that even the trees had been a bad move,  and  that  no
one should ever have left the oceans.</p>
  <p>And then, one Thursday, nearly two thousand years after  one  man
had  been nailed to a tree for saying how great it would be to be
nice to people for a change, one girl sitting on  her  own  in  a
small  cafe  in  Rickmansworth suddenly realized what it was that
had been going wrong all this time, and she finally knew how  the
world  could  be  made  a  good and happy place. This time it was
right, it would work, and no one would  have  to  get  nailed  to
  <p>Sadly, however, before she could get to a phone  to  tell  anyone
about  it,  a  terribly stupid catastrophe occurred, and the idea
was lost forever.</p>
  <p>This is not her story.</p>
  <p>But it is the story of that terrible stupid catastrophe and  some
of its consequences.</p>
  <p>It is also the story of a book, a book called The  Hitch  Hiker's
Guide  to  the  Galaxy  -  not  an Earth book, never published on
Earth, and until the terrible catastrophe occurred, never seen or
heard of by any Earthman.</p>
  <p>Nevertheless, a wholly remarkable book.</p>
  <p>in fact it was probably the most remarkable book ever to come out
of  the  great  publishing  houses  of  Ursa  Minor - of which no
Earthman had ever heard either.</p>
  <p>Not only is it a wholly remarkable book,  it  is  also  a  highly
successful  one  -  more  popular  than  the  Celestial Home Care
Omnibus, better selling than Fifty More  Things  to  do  in  Zero
Gravity, and more controversial than Oolon Colluphid's trilogy of
philosophical blockbusters Where God Went  Wrong,  Some  More  of
God's Greatest Mistakes and Who is this God Person Anyway?</p>
  <p>In many of the more relaxed civilizations on  the  Outer  Eastern
Rim of the Galaxy, the Hitch Hiker's Guide has already supplanted
the great Encyclopedia Galactica as the  standard  repository  of
all  knowledge  and  wisdom, for though it has many omissions and
contains much that is apocryphal, or at least wildly  inaccurate,
it  scores  over the older, more pedestrian work in two important
   <p>First, it is slightly cheaper; and  secondly  it  has  the  words
Don't Panic inscribed in large friendly letters on its cover.</p>
  <p>But the story of this terrible, stupid Thursday, the story of its
extraordinary   consequences,   and   the  story   of  how  these
consequences are inextricably intertwined  with  this  remarkable
book begins very simply.</p>
  <p>It begins with a house.</p>

              @import "compass/css3";

body { background: #f8f6f4; font-family: "Georgia", serif; font-size: 1em; color: #333; }
#navigation { margin: 20px auto 0; width: 200px; }
.btn { background: #1eb4e6; border: none; color: #fff; padding: 8px 18px; border-radius: 3px; transition: all ease .3s; }
.btn:hover { background: darken(#1eb4e6,10%); }
#content {
  -adobe-flow-into: carousel;
  -webkit-flow-into: carousel;
#content p { line-height: 22px; }
.first { font-size: 40px; float: left; margin: -5px 0 -5px 0; }
.region {
  -adobe-flow-from: carousel;
  -webkit-flow-from: carousel;

.container {
  width: 420px;
  height: 320px;
  position: relative;
  margin: 30px auto;
  perspective: 2200px;
#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateZ( -549px );
  transform-style: preserve-3d;
  transition: transform 1s;

#carousel figure {
  display: block;
  position: absolute;
  width: 380px;
  height: 280px;
  left: 10px;
  top: 10px;
  color: #333;
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
#carousel .cover { background: url(http://s.cdpn.io/6035/hitchhikers_cover.jpg) no-repeat; }
$translateZ: 549px;

#carousel figure:nth-child(1) {
  transform: rotateY(   0deg ) translateZ( $translateZ );
#carousel figure:nth-child(2) {
  transform: rotateY(  40deg ) translateZ( $translateZ );
#carousel figure:nth-child(3) {
  transform: rotateY(  80deg ) translateZ( $translateZ );
#carousel figure:nth-child(4) {
  transform: rotateY( 120deg ) translateZ( $translateZ );
#carousel figure:nth-child(5) {
  transform: rotateY( 160deg ) translateZ( $translateZ );
#carousel figure:nth-child(6) {
  transform: rotateY( 200deg ) translateZ( $translateZ );
#carousel figure:nth-child(7) {
  transform: rotateY( 240deg ) translateZ( $translateZ );
#carousel figure:nth-child(8) {
  transform: rotateY( 280deg ) translateZ( $translateZ );
#carousel figure:nth-child(9) {
  transform: rotateY( 320deg ) translateZ( $translateZ );
              /* Carousel is inspired by the great work of @desandro. */

var panelSize = 400,
    panelCount = 9;
var tz = Math.round( ( panelSize / 2 ) / 
  Math.tan( Math.PI / panelCount ) );

var init = function() {
      var carousel = document.getElementById('carousel'),
          navButtons = document.querySelectorAll('#navigation button'),
          panelCount = carousel.children.length,
          transformProp = Modernizr.prefixed('transform'),
          theta = 0,

          onNavButtonClick = function( event ){
            var increment = parseInt( event.target.getAttribute('data-increment') );
            theta += ( 360 / panelCount ) * increment * -1;
            carousel.style[ transformProp ] = 'translateZ( -549px ) rotateY(' + theta + 'deg)';

      for (var i=0; i < 2; i++) {
        navButtons[i].addEventListener( 'click', onNavButtonClick, false);


    window.addEventListener( 'DOMContentLoaded', init, false);

//alert( tz );

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.


Loading ..................