backface-visibility Example

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>css-transition-text</title>
    </head> 
    <body>
        <h1>Wickedly Awesome Header</h1>
        <p>Slightly less but still reasonably awesome paragraph</p>
    </body>
</html>

CSS

h1
{
    font-size: 2em;
    position: absolute;
    top: 10px;
    left: 50px;
    
    -webkit-transform: scale(1.0) rotate(3deg);
        -ms-transform: scale(1.0) rotate(3deg);
       -moz-transform: scale(1.0) rotate(3deg);
         -o-transform: scale(1.0) rotate(3deg);
            transform: scale(1.0) rotate(3deg);

    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.0s;  
        -ms-transition:     -ms-transform 0.5s ease-in-out 0.0s;  
       -moz-transition:    -moz-transform 0.5s ease-in-out 0.0s;  
         -o-transition:      -o-transform 0.5s ease-in-out 0.0s;  
            transition:         transform 0.5s ease-in-out 0.0s;  
}

h1:hover
{
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
       -moz-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);

    -webkit-transition: -webkit-transform 0.5s ease-in-out 0.0s;  
        -ms-transition:     -ms-transform 0.5s ease-in-out 0.0s;  
       -moz-transition:    -moz-transform 0.5s ease-in-out 0.0s;  
         -o-transition:      -o-transform 0.5s ease-in-out 0.0s;  
            transition:         transform 0.5s ease-in-out 0.0s;  
}

p { margin-top: 60px; } /* Just getting this out of the way */