A CodePen by xav76. Improved Page Flipping Effect - Hey i saw Page Fan pen of McCray and really liked the idea, however i did not like that it was static :) so i improved it a bit with javascript

index.slim

body
  .page-w
    div.page.page1
      div.title 1
      div.content
        h2 Howdy Page 1
        image src="http://dummyimage.com/190x90/593446/fff"
        p Cras sollicitudin imperdiet diam at venenatis. Vivamus turpis lectus, elementum at bibendum et, condimentum non lorem. Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus.Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus.
    div.page.page2
      div.title 2
      div.content
        h2 Hello Page 2
        image src="http://dummyimage.com/190x90/92a298/fff"
        p Proin vel nisl sit amet elit faucibus dapibus eu in nisi. Nullam vitae sapien eu massa convallis aliquet. Cras et sapien eros, a laoreet mauris.Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus.
    div.page.page3
      div.title 3
      div.content
        h2 Hey Page 3
        image src="http://dummyimage.com/190x90/94ccc0/fff"
        p Proin tortor urna, scelerisque facilisis cursus vel, faucibus at augue. Etiam id semper dui. Aenean et justo tellus. Donec ac nunc nulla, vitae pharetra risus.Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus.
    div.page.active.page4
      div.title 4
      div.content
        h2 Wazzap Page 4
        image src="http://dummyimage.com/190x90/6c7065/fff"
        p Sollicitudin imperdiet diam at venenatis. Vivamus turpis lectus, elementum at bibendum et, condimentum non lorem. Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus.Cras eget felis orci. Aenean ante metus, vestibulum in gravida eu, mattis sed lacus.

script.coffeescript

$(".page").on "click", (event) ->
  if $(this).hasClass('active') 
    return false                
  save_margin = $(this).css('marginLeft')
  $(this)
    .animate(
      'marginLeft' : "-400px",
      300, 'linear', ->
        $(this).insertAfter('.page.active')
        $(this).animate(
          'marginLeft' : save_margin,
          300, 'linear', ->
            $('.page.active').removeClass('active')
            $(this).addClass('active')
            $(this).css('position', 'relative')
        )
    )

style.less

body {
  background-color: #474747;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Sans-Serif;
  font-weight: 300;
  padding-left:40%;
  padding-top:40px;
}

.page-w {
  padding:20px;
  position:relative
}
.page {
  display: block;
  float:left;
  margin-left: -190px;
  background: white;
  height: 350px;
  box-shadow: 0px 4px 10px #000;
  border: 2px solid #f3f3f3;
  padding: 5px;
  transform: translate(0px, 0px) translateZ(0);
  transition: all 0.1s;
  background-image: linear-gradient(-90deg, #ddd 40%, #ccc 90%);
  cursor:pointer;
  position:relative;
  
  &.page1 {
    transform: translate(-6px, -3px) rotate(-15.2deg);
  }
  &.page2 {
    transform: translate(-6px, -3px) rotate(-10.2deg);
  }
  &.page3 {
    transform: translate(-6px, -3px) rotate(-7.2deg);
  } 
  &.page4 {
    transform: translate(-6px, -3px) rotate(-2.2deg);
  }
  
  &:not(.active):hover {
    transform: translate(-6px, -30px) rotate(-4.2deg);
    background-image: linear-gradient(-90deg, white 40%, #DCDCDC 90%);
  }
  &.active {
    border: 2px solid #FFF;
    background-image: linear-gradient(-90deg, white 40%, #DCDCDC 90%);
  }
  &.active:hover {
  }
  
  h2 {
    font-size:18px;
    border-bottom:1px solid #eee;
    padding-bottom:5px;
    margin:0px 0px 10px;
  }
  
  .title {
    float: left;
    color: silver;
    font-weight: bold;
    margin-left:4px
  }
    
  .content {
    float: left;
    width: 190px;
    padding:10px 15px;
    font-size:14px;
    margin-left:5px;
    
    img {
      margin-bottom:5px;
    }
    p {
      margin: 0;
      padding: 0;
      &.info {
        color: silver;
      }
    }
  }
  
}