Animation to rotate Text

and javascript with regex to encapsule each letter in a span

HTML

<div class="start">M</div><div class="start">H</div>

CSS

@keyframes rotateText
{
    0%   {transform: scaleY(1); }
    50%  {transform: scaleY(-1); }
    100% {transform: scaleY(1); }
}

.start > span {
    animation: rotateText 2s;    
    display: inline-block;    
}

body {
    font-size: 3em;    
}

JavaScript

$(".start").html($(".start").html().replace(/./g, "<span>$&</span>"));