A Pen by Josh Bader.

index.html

<div class="toggle">
  <a class="skew active" href="#0">Skew</a>
  <a class="rotate" href="#0">Rotate</a>
</div>

<ul class="tiltlist skew">
  <li>
    <h2>Lorem ipsum</h2>
    <p>Dolor sit amet, consectetur adipisicing elit. Nesciunt id tempore sit modi accusamus sequi velit consequuntur iusto temporibus nam.</p>
  </li>
  <li>
    <h2>Lorem ipsum</h2>
    <p>Dolor sit amet, consectetur adipisicing elit. Nesciunt id tempore sit modi accusamus sequi velit consequuntur iusto temporibus nam.</p>
  </li>
  <li>
    <h2>Lorem ipsum</h2>
    <p>Dolor sit amet, consectetur adipisicing elit. Nesciunt id tempore sit modi accusamus sequi velit consequuntur iusto temporibus nam.</p>
  </li>
  <li>
    <h2>Lorem ipsum</h2>
    <p>Dolor sit amet, consectetur adipisicing elit. Nesciunt id tempore sit modi accusamus sequi velit consequuntur iusto temporibus nam.</p>
  </li>
  <li>
    <h2>Lorem ipsum</h2>
    <p>Dolor sit amet, consectetur adipisicing elit. Nesciunt id tempore sit modi accusamus sequi velit consequuntur iusto temporibus nam.</p>
  </li>
  <li>
    <h2>Lorem ipsum</h2>
    <p>Dolor sit amet, consectetur adipisicing elit. Nesciunt id tempore sit modi accusamus sequi velit consequuntur iusto temporibus nam.</p>
  </li>
</ul>

script.js

var toggle = $('.toggle'),
    tiltlist = $('.tiltlist');

toggle.find('a').on('click', function() {
  var self = $(this); self.addClass('active').siblings('.active').removeClass('active');
  tiltlist.attr('class', 'tiltlist ' + self.attr('class'));
});

style.css

/* Fonts */

@import url(http://fonts.googleapis.com/css?family=Exo+2:400,700);


/* Basic Reset */

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


/* Structure */

body {
  font: 87.5%/1.389em 'Exo 2', sans-serif;
  color: #000;
  background: #222;
}

h2, p { margin-bottom: 1em; }

.toggle {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 10;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
}

.toggle a {
  position: relative;
  float: left; display: block;
  width: 32px; height: 32px;
  text-indent: -9999px;
  background: #222;
  box-shadow: inset 0 0 0 2px #eee;
  cursor: pointer;
}
.toggle a.active {
  background: #eee;
  cursor: default;
}

.toggle .skew { border-radius: 3px 0 0 3px; }
.toggle .rotate { border-radius: 0 3px 3px 0; }

.toggle .skew:after ,
.toggle .rotate:after {
  content: '';
  position: absolute;
  top: 11px; left: 11px;
  display: block;
  width: 10px; height: 10px;
  background: #eee;
}

.toggle .skew:after { transform: skewY(-20deg); }
.toggle .rotate:after { transform: rotate(-20deg); }

.toggle .skew.active:after { background: #ff5454; }
.toggle .rotate.active:after { background: #00b5d9; }

.tiltlist {
  list-style: none;
  position: relative;
  max-width: 320px;
  margin: 0 auto;
  overflow: hidden;
}

.tiltlist:before,
.tiltlist:after {
  content: '';
  position: absolute;
  display: block;
  width: 110%; height: 50px;
  margin-left: -15px;
  background: #eee;
} 

.tiltlist:before { top: -50px; }
.tiltlist:after { bottom: -50px; }

.tiltlist li {
  padding: 2em 3em 1em; margin: 10px 0 10px -15px;
  width: 350px;
  background: #eee;
  transition: transform 250ms;
}

.tiltlist.skew:before,
.tiltlist.skew:after,
.tiltlist.skew li { transform: skewY(-8deg); }

.tiltlist.rotate:before,
.tiltlist.rotate:after,
.tiltlist.rotate li { transform: rotate(-8deg); }


/* Theme */

.tiltlist li:nth-child(2n) h2 { color: #00b5d9; }
.tiltlist li:nth-child(2n+1) h2 { color: #ff5454; }

Tiltlist.markdown

Tiltlist

Add some flair to your list view with CSS Transform (Skew or Rotate).

A Pen by Josh Bader on CodePen.

License.