Javascript 随机旋转每个H3跨度元素的字符

在我的网站上，我有h3元素，每个字母都在它自己的范围内。这是因为我选择的字体是气球字体，我想给人一种印象，它们是不同颜色的气球来组成我的字体，在另一个旁边看不到任何颜色，它们将通过我下面的代码在页面加载时通过循环随机选择

var defaultColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
    availColors = [],
    randomColor = '';

$('h3 span').each(function () {
    if (availColors.length == 0)
        availColors = defaultColors.slice(0);

    randomColor = availColors[Math.floor(Math.random() * availColors.length)];
    availColors = $.grep(availColors, function (value) {
        return value != randomColor;
    });
    $(this).css('color', randomColor);
});

我想通过将每个角色顺时针或逆时针旋转30°来添加一个更真实的元素，就像它们是浮动的一样

在此处查看live view当前的外观：

尝试更改

$(this).css('color', randomColor);

到

---

谢谢你的帮助@adeneo，但是我相信我已经按照你的建议做了，没有任何效果。我已经更新了live view以查看我的编辑。@user3670469-我的错，如果不将内联跨距设置为内联块，您就无法旋转内联跨距。非常感谢@adeneo我正在保存此问题，这样我就可以+1您的答案，因为我还没有足够的评分来评分您的答案。抱歉，但请确保我非常感激！）需要注意的是，有足够的重复次数达到+1，我刚刚做到了：）@adeneo@TimMarshall-谢谢，很乐意帮忙！

var degree = Math.random() > 0.5 ? '30' : '-30';

$(this).css({
    color               : randomColor,
    '-webkit-transform' : 'rotate(' + degree + 'deg)',
    '-moz-transform'    : 'rotate(' + degree + 'deg)',
    '-ms-transform'     : 'rotate(' + degree + 'deg)',
    '-o-transform'      : 'rotate(' + degree + 'deg)',
    transform           : 'rotate(' + degree + 'deg)',
    zoom                : 1,
    display             : 'inline-block'
});