web前端之3D标签动画、指定范围的随机数、动态设置css变量、文档片段对象、反向动画

3D标签动画：

// 创建3D动画
function create3DTagAnimation(element) {
    const animation = element.animate({
        transform: [
            'perspective(600px) rotateX(0deg) rotateY(0deg)',
            'perspective(600px) rotateX(360deg) rotateY(360deg)'
        ]
    }, {
        duration: 5000,
        direction: 'alternate',
        iterations: Infinity,
        easing: 'ease-in-out'
    });
    return animation;
}

指定范围内的随机数：

// 获取指定范围内的随机数
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; // 返回介于min和max之间的一个随机整数
}

动态设置CSS变量：

// 设置CSS变量的值
function setCSSVariable(element, name, value) {
    element.style.setProperty('--' + name, value);
}

文档片段对象：

// 创建并返回一个新的DocumentFragment
function createDocumentFragment() {
    return document.createDocumentFragment();
}

反向动画：

// 反向播放动画
function playAnimationInReverse(animation) {
    animation.pause();
    animation.effect.reverse().applyForwards();
    animation.play();
}