Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<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>
    </nav>
</section>
<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>
</section>

<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
anything.</p>
  <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
respects.</p>
   <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>

</div>
              
            
!

CSS

              
                @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(https://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 );
}
              
            
!

JS

              
                /* 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 );
              
            
!
999px

Console