What It Starts With:
Code:
<h3 id="example2">Home | About | Contact | Terms</h3>

The Result:
Code:
<h3 id="example2" style="display: block;">
    <span class="char1" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(-54px) rotate(21deg);">H</span>
    <span class="char2" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-1px) translateY(-46px) rotate(19deg);">o</span>
    <span class="char3" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-37px) rotate(17deg);">m</span>
    <span class="char4" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-30px) rotate(15deg);">e</span>
    <span class="char5 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-25px) rotate(14deg);">&nbsp;</span>
    <span class="char6" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-21px) rotate(13deg);">|</span>
    <span class="char7 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-18px) rotate(12deg);">&nbsp;</span>
    <span class="char8" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-14px) rotate(11deg);">A</span>
    <span class="char9" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-10px) rotate(9deg);">b</span>
    <span class="char10" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-7px) rotate(7deg);">o</span>
    <span class="char11" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-1px) translateY(-4px) rotate(6deg);">u</span>
    <span class="char12" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-1px) translateY(-2px) rotate(4deg);">t</span>
    <span class="char13 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-1px) translateY(-1px) rotate(3deg);">&nbsp;</span>
    <span class="char14" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(0px) rotate(2deg);">|</span>
    <span class="char15 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(0px) rotate(1deg);">&nbsp;</span>
    <span class="char16" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg);">C</span>
    <span class="char17" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(0px) rotate(-1deg);">o</span>
    <span class="char18" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(1px) translateY(-1px) rotate(-3deg);">n</span>
    <span class="char19" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(1px) translateY(-3px) rotate(-5deg);">t</span>
    <span class="char20" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-5px) rotate(-6deg);">a</span>
    <span class="char21" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-8px) rotate(-8deg);">c</span>
    <span class="char22" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-11px) rotate(-9deg);">t</span>
    <span class="char23 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-15px) rotate(-11deg);">&nbsp;</span>
    <span class="char24" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-18px) rotate(-12deg);">|</span>
    <span class="char25 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-21px) rotate(-13deg);">&nbsp;</span>
    <span class="char26" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-25px) rotate(-14deg);">T</span>
    <span class="char27" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-30px) rotate(-16deg);">e</span>
    <span class="char28" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-37px) rotate(-17deg);">r</span>
    <span class="char29" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(1px) translateY(-45px) rotate(-19deg);">m</span>
    <span class="char30" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(-55px) rotate(-21deg);">s</span>
</h3>
Hopeful Outcome:
Code:
<h3 id="example2" style="display: block;">
    <a href="www.google.co.uk">
        <span class="char1" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(-54px) rotate(21deg);">H</span>
        <span class="char2" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-1px) translateY(-46px) rotate(19deg);">o</span>
        <span class="char3" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-37px) rotate(17deg);">m</span>
        <span class="char4" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-30px) rotate(15deg);">e</span>
    </a>
    <span class="char5 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-25px) rotate(14deg);">&nbsp;</span>
    <span class="char6" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-21px) rotate(13deg);">|</span>
    <span class="char7 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-18px) rotate(12deg);">&nbsp;</span>
    <span class="char8" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-14px) rotate(11deg);">A</span>
    <span class="char9" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-10px) rotate(9deg);">b</span>
    <span class="char10" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-2px) translateY(-7px) rotate(7deg);">o</span>
    <span class="char11" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-1px) translateY(-4px) rotate(6deg);">u</span>
    <span class="char12" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-1px) translateY(-2px) rotate(4deg);">t</span>
    <span class="char13 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(-1px) translateY(-1px) rotate(3deg);">&nbsp;</span>
    <span class="char14" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(0px) rotate(2deg);">|</span>
    <span class="char15 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(0px) rotate(1deg);">&nbsp;</span>
    <span class="char16" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(0px) rotate(0deg);">C</span>
    <span class="char17" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(0px) rotate(-1deg);">o</span>
    <span class="char18" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(1px) translateY(-1px) rotate(-3deg);">n</span>
    <span class="char19" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(1px) translateY(-3px) rotate(-5deg);">t</span>
    <span class="char20" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-5px) rotate(-6deg);">a</span>
    <span class="char21" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-8px) rotate(-8deg);">c</span>
    <span class="char22" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-11px) rotate(-9deg);">t</span>
    <span class="char23 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-15px) rotate(-11deg);">&nbsp;</span>
    <span class="char24" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-18px) rotate(-12deg);">|</span>
    <span class="char25 empty" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-21px) rotate(-13deg);">&nbsp;</span>
    <span class="char26" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-25px) rotate(-14deg);">T</span>
    <span class="char27" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-30px) rotate(-16deg);">e</span>
    <span class="char28" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(2px) translateY(-37px) rotate(-17deg);">r</span>
    <span class="char29" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(1px) translateY(-45px) rotate(-19deg);">m</span>
    <span class="char30" style="display: inline-block; -webkit-transition: none; transition: none; -webkit-transform: translateX(0px) translateY(-55px) rotate(-21deg);">s</span>
</h3>
What I've Tried:

Sourcing on-line, this function should be able to wrap my spans via their class names. Evidently, either it does not work, or everything is happening after this function is called.

Code:
$(".char1, .char2").wrapAll('<div class="test"></div>', 1500);
And:
Code:
$("span .char1,span .char2").wrapAll('<div class="test"></div>', 1500);
Live View: Untitled Document

Thank you for any help in advanced,
Best Regards,
Tim