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

Question

在我的网站上，我有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°来增加真实感，就像它们是浮动的一样。

看一下当前实时取景的外观： http : //rafflebananza.com/new-website/index.html

Answer 1

尝试改变

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

至

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'
});