HTML5 and CSS Testing Area

These are just some cool little HTML5 and CSS tricks I've picked up and tested along the way. Feel free to use them as you see fit.
(hint: they are good for grabbing people's attention and making your site stand out from the crowd)

A Cool Rollover Text Effect:

Watch how this rolls over

To Create this Effect, use this in your body area:

<a href="#" class="roll-link" ><span data-title="Watch how this link rolls over">Watch how this link rolls over</span></a>

And add this in your CSS

.roll-link {
display: inline-block;
overflow: hidden;
perspective: 600px;
perspective-origin: 50% 50%;
vertical-align: top;
.roll-link:hover {
text-decoration: none;
.roll-link span {
color: #e93a30 !important;
display: block;
padding: 0 2px;
position: relative;
transform-origin: 50% 0 0;
transform-style: preserve-3d;
transition: all 400ms ease 0s;
.roll-link:hover span {
background: none repeat scroll 0 0 #e93a30;
transform: translate3d(0px, 0px, -30px) rotateX(90deg);
.roll-link span:after {
background: none repeat scroll 0 0 #e93a30;
border-radius: 2px;
color: #fff;
content: attr(data-title);
display: block;
left: 0;
padding: 0 2px;
position: absolute;
top: 0;
transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
transform-origin: 50% 0 0;