mrflix/gist:1010898

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
  <title>Lion Mail 3d Animation</title>
  <style type="text/css">
    body {
      font: 12px/15px "Helvetica Neue", sans-serif;
      background: #adb0b8;
    }

    h3 {
      margin: 0;
      font-size: 12px;
      line-height: 18px;
      font-weight: bold;
    }

    hr {
      border: none;
      border-bottom: 1px solid #ddd;
      margin-bottom: 13px;
    }

    article {
      max-width: 512px;
      margin: 8px auto 21px;
    }

    article:last-child {
      margin-bottom: 8px;
    }

    section:not(.hidden),
    section.hidden > .slide,
    .seeMore {
      padding: 0 15px;
      background-color: white;
      border-left: 1px solid #777;
      border-right: 1px solid #777;
      position: relative;
    }

    section.hidden {
      height: 18px;
      background: transparent;
      position: relative;
      overflow: hidden;
  			-webkit-perspective: 360;
  			-webkit-perspective-origin: 50% 50%;
    }
    .ready section.hidden {
        -webkit-transition: 480ms;
    }

    section.hidden > .slide {
      top: 0;
      margin: 0;
      height: 0;
      width: 480px;
      overflow: hidden;
      background-color: #aaa;
      background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 75%);
			-webkit-transform-style: preserve-3d;
			-webkit-transform-origin: top;
			-webkit-transform: rotateX(-90deg);
      position: absolute;
    }
    .ready section.hidden > .slide {
      -webkit-transition: 480ms;
    }

    section.hidden > .slide.helper {
      top: auto;
      bottom: 0;
      z-index: -1;
      background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1) 75%);
			-webkit-transform-origin: bottom;
			-webkit-transform: rotateX(90deg);
    }

    section.hidden > .slide.helper > blockquote {
      position: absolute;
      bottom: 0;
    }

   .visible section.hidden > .slide {
  		-webkit-transform: rotateX(0deg);
      background-color: white;
    }
    section:not(.hidden) {
      padding: 15px;
      z-index: 1;
    }

    section:first-child {
      padding-bottom: 0;
      border-top: 1px solid #888;
    }

    section:last-child {
      padding-top: 0;
      border-bottom: 1px solid #666;
    }

    blockquote,
    .level-1, .level-2, .level-3 {
      margin: 8px 0;
      padding: 0 8px;
      color: #144fae;
      border-left: 2px solid #144fae;
    }

    blockquote blockquote,
    .level-2 {
      color: #006312;
      border-color: #006312;
    }

    blockquote blockquote blockquote,
    .level-3 {
      color: #540000;
      border-color: #540000;
    }

    .seeMore {
      padding-top: 3px;
      height: 15px;
      width: 480px;
      position: absolute;
      bottom: 0;
      overflow: hidden;
      -webkit-transition: 240ms;
    }

    .seeMore.hidden {
      padding-top: 0;
      height: 0;
      opacity: 0;
    }

    .level-1, .level-2, .level-3 {
      margin: 0;
      color: #777;
      font-weight: bold;
      border-left-style: dotted;
      cursor: pointer;
      overflow: hidden;
      -webkit-transition: 500ms;
      -moz-transition: 500ms;
      transition: 500ms;
    }

    .shortend section:first-child blockquote,
    .shortend section:first-child blockquote blockquote,
    .shortend section:first-child blockquote blockquote blockquote {
      margin-bottom: 0;
    }

    .hidden blockquote,
    .hidden blockquote blockquote,
    .hidden blockquote blockquote blockquote {
      margin-top: 0;
    }
</style>
</head>
<body>
  <article class="shortend">
    <section>
      <h3>Josheowaa &lt;josh.heowaa@yahoo.com&gt;</h3>
      We'll talk about it soon<br>
      June 6, 2011 00:10pm
      <hr>
      Night time - sympathize - I've been working on white lies.<br>
      So I'll tell the truth - I'll give it up to you. <br>
      And when the day come, it will have all been fun. We'll talk about it soon.
      <blockquote>
        You mean that much to me and it's hard to show.<br>
        Gets hectic inside of me when you go.<br>
        Can I confess these things to you.<br>
        Well I don't know embedded in my chest.<br>
        And it hurts to hold.
        <blockquote>
          I couldn't spill my heart, my eyes gleam looking in from the dark.<br>
          I walk out in stormy weather, hold my words, keep us together.<br>
          Steady walking but bound to trip, should release but just tighten my grip.
          <blockquote>
            And I couldn't spill my heart.
          </blockquote>
        </blockquote>
      </blockquote>
    </section>
    <section class="hidden">
      <div class="slide">
        <blockquote>
          <blockquote>
            <blockquote>
              My eyes gleam looking in from the dark.<br>
              I walk out in stormy weather, hope my words keep us together.<br>
              Steady walking but bound to trip.<br>
              Should release but just tighten my grip.<br>
              <br>
              Night time - sympathize - I've been working on white lies.<br>
              So I'll tell the truth - I'll give it up to you. <br>
              And when the day come, it will have all been fun. We'll talk about it soon.
            </blockquote>
            That's what she said.
          </blockquote>
          Get of my lawn!
        </blockquote>
      </div>
      <div class="seeMore">
        <div class="level-1">
          <div class="level-2">
            <div class="level-3">
              see more
            </div>
          </div>
        </div>
      </div>
    </section>
    <section>
      <br>
      --<br>
      Josheowaa
    </section>
  </article>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
  var shortendArticleList = [];
  var $shortend = $('.shortend');

  var shortendArticle = {
    init: function(el){
      this.$el = $(el);
      this.$section = this.$el.find('section.hidden');
      this.$trigger = this.$el.find('.seeMore');
      this.$holder = this.$el.find('.slide');
      this.$helper = this.$holder.clone().addClass('helper').appendTo(this.$section);

      this.$trigger.click($.proxy( this, "reveal" ));

      this.getHiddenHeight();
    },
    getHiddenHeight: function(){
      this.height = this.$holder.css('height', 'auto').height();
      this.$holder.css('height', 0);

      // resize both slide and helper to 50% height
      this.$holder.css('height', this.height/2 + "px");
      this.$helper.css('height', this.height/2 + "px");
      setTimeout($.proxy(this,'ready'), 10);
    },
    ready: function(){
      this.$el.addClass('ready');
    },
    reveal: function(){
      this.$el.addClass('visible animating');
      this.$trigger.addClass('hidden');
      this.$section.css('height', this.height + "px");
    }
  }

  $.each($shortend, function(i, el){
    shortendArticleList[i] = Object.create(shortendArticle);
    shortendArticleList[i].init(el);
  });
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Lion Mail 3d Animation</title>
	<style type="text/css">
	body {
	font: 12px/15px "Helvetica Neue", sans-serif;
	background: #adb0b8;
	}

	h3 {
	margin: 0;
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
	}

	hr {
	border: none;
	border-bottom: 1px solid #ddd;
	margin-bottom: 13px;
	}

	article {
	max-width: 512px;
	margin: 8px auto 21px;
	}

	article:last-child {
	margin-bottom: 8px;
	}

	section:not(.hidden),
	section.hidden > .slide,
	.seeMore {
	padding: 0 15px;
	background-color: white;
	border-left: 1px solid #777;
	border-right: 1px solid #777;
	position: relative;
	}

	section.hidden {
	height: 18px;
	background: transparent;
	position: relative;
	overflow: hidden;
	-webkit-perspective: 360;
	-webkit-perspective-origin: 50% 50%;
	}
	.ready section.hidden {
	-webkit-transition: 480ms;
	}

	section.hidden > .slide {
	top: 0;
	margin: 0;
	height: 0;
	width: 480px;
	overflow: hidden;
	background-color: #aaa;
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 75%);
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: top;
	-webkit-transform: rotateX(-90deg);
	position: absolute;
	}
	.ready section.hidden > .slide {
	-webkit-transition: 480ms;
	}

	section.hidden > .slide.helper {
	top: auto;
	bottom: 0;
	z-index: -1;
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1) 75%);
	-webkit-transform-origin: bottom;
	-webkit-transform: rotateX(90deg);
	}

	section.hidden > .slide.helper > blockquote {
	position: absolute;
	bottom: 0;
	}

	.visible section.hidden > .slide {
	-webkit-transform: rotateX(0deg);
	background-color: white;
	}
	section:not(.hidden) {
	padding: 15px;
	z-index: 1;
	}

	section:first-child {
	padding-bottom: 0;
	border-top: 1px solid #888;
	}

	section:last-child {
	padding-top: 0;
	border-bottom: 1px solid #666;
	}

	blockquote,
	.level-1, .level-2, .level-3 {
	margin: 8px 0;
	padding: 0 8px;
	color: #144fae;
	border-left: 2px solid #144fae;
	}

	blockquote blockquote,
	.level-2 {
	color: #006312;
	border-color: #006312;
	}

	blockquote blockquote blockquote,
	.level-3 {
	color: #540000;
	border-color: #540000;
	}

	.seeMore {
	padding-top: 3px;
	height: 15px;
	width: 480px;
	position: absolute;
	bottom: 0;
	overflow: hidden;
	-webkit-transition: 240ms;
	}

	.seeMore.hidden {
	padding-top: 0;
	height: 0;
	opacity: 0;
	}

	.level-1, .level-2, .level-3 {
	margin: 0;
	color: #777;
	font-weight: bold;
	border-left-style: dotted;
	cursor: pointer;
	overflow: hidden;
	-webkit-transition: 500ms;
	-moz-transition: 500ms;
	transition: 500ms;
	}

	.shortend section:first-child blockquote,
	.shortend section:first-child blockquote blockquote,
	.shortend section:first-child blockquote blockquote blockquote {
	margin-bottom: 0;
	}

	.hidden blockquote,
	.hidden blockquote blockquote,
	.hidden blockquote blockquote blockquote {
	margin-top: 0;
	}
	</style>
	</head>
	<body>
	<article class="shortend">
	<section>
	<h3>Josheowaa <josh.heowaa@yahoo.com></h3>
	We'll talk about it soon<br>
	June 6, 2011 00:10pm
	<hr>
	Night time - sympathize - I've been working on white lies.<br>
	So I'll tell the truth - I'll give it up to you. <br>
	And when the day come, it will have all been fun. We'll talk about it soon.
	<blockquote>
	You mean that much to me and it's hard to show.<br>
	Gets hectic inside of me when you go.<br>
	Can I confess these things to you.<br>
	Well I don't know embedded in my chest.<br>
	And it hurts to hold.
	<blockquote>
	I couldn't spill my heart, my eyes gleam looking in from the dark.<br>
	I walk out in stormy weather, hold my words, keep us together.<br>
	Steady walking but bound to trip, should release but just tighten my grip.
	<blockquote>
	And I couldn't spill my heart.
	</blockquote>
	</blockquote>
	</blockquote>
	</section>
	<section class="hidden">
	<div class="slide">
	<blockquote>
	<blockquote>
	<blockquote>
	My eyes gleam looking in from the dark.<br>
	I walk out in stormy weather, hope my words keep us together.<br>
	Steady walking but bound to trip.<br>
	Should release but just tighten my grip.<br>
	<br>
	Night time - sympathize - I've been working on white lies.<br>
	So I'll tell the truth - I'll give it up to you. <br>
	And when the day come, it will have all been fun. We'll talk about it soon.
	</blockquote>
	That's what she said.
	</blockquote>
	Get of my lawn!
	</blockquote>
	</div>
	<div class="seeMore">
	<div class="level-1">
	<div class="level-2">
	<div class="level-3">
	see more
	</div>
	</div>
	</div>
	</div>
	</section>
	<section>
	<br>
	--<br>
	Josheowaa
	</section>
	</article>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript">
	var shortendArticleList = [];
	var $shortend = $('.shortend');

	var shortendArticle = {
	init: function(el){
	this.$el = $(el);
	this.$section = this.$el.find('section.hidden');
	this.$trigger = this.$el.find('.seeMore');
	this.$holder = this.$el.find('.slide');
	this.$helper = this.$holder.clone().addClass('helper').appendTo(this.$section);

	this.$trigger.click($.proxy( this, "reveal" ));

	this.getHiddenHeight();
	},
	getHiddenHeight: function(){
	this.height = this.$holder.css('height', 'auto').height();
	this.$holder.css('height', 0);

	// resize both slide and helper to 50% height
	this.$holder.css('height', this.height/2 + "px");
	this.$helper.css('height', this.height/2 + "px");
	setTimeout($.proxy(this,'ready'), 10);
	},
	ready: function(){
	this.$el.addClass('ready');
	},
	reveal: function(){
	this.$el.addClass('visible animating');
	this.$trigger.addClass('hidden');
	this.$section.css('height', this.height + "px");
	}
	}

	$.each($shortend, function(i, el){
	shortendArticleList[i] = Object.create(shortendArticle);
	shortendArticleList[i].init(el);
	});
	</script>
	</body>
	</html>