title: CSS3 HTML5 Cross Browser 3d flip effect on hover link
body: <p>I have placed several links on my site within a div and span tag that when hovering over them they flip in a 3d looking way to reveal a new message. <a href="http://elitedesignstudios.com/about/" rel="nofollow">Look here and roll over the link in the first paragraph of text</a>. It works ok but I have some questions. The revealed text is a little blurry and I cant fix it, and if I include a reveal message that is a couple characters longer then my link text it cuts it off instead of expanding it. I thought that only happened with a "overflow" declaration. Ideas Anyone?</p>
  
  <p>The html:</p>
  
  <pre><code>&lt;a href="/portfolio" title="View Our Portfolio" class="roll-link"&gt;
  &lt;span data-title="Check It Out ..."&gt;Our Portfolio&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>/* ROLL LINKS */
  
  .roll-link {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  text-decoration:underline;
  }
  
  .roll-link:hover {
  text-decoration:none;
  }
  
  .roll-link span {
  display: block;
  position: relative;
  padding: 0 2px;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  }
  .roll-link:hover span {
  background: #3887be;
  -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
  -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
  }
  
  .roll-link span:after {
  content: attr(data-title);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 2px;
  color: #fff;
  background: #3887be;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  }
  </code></pre>
  
  <p>EDIT: I added link to it working on my site and <a href="http://jsfiddle.net/LVFSA/" rel="nofollow">here is the mark up to mess with</a>. Im seeing it work in chrome, safari, and firefox all running on osx.</p>