完全旋转和随机化所有 DOM 元素

Question

我有一个“有趣”的客户，一个画家，他想让用户在他的网站上循环。

他们希望在他们的网站上添加一个假的用户名和密码表单，这会非常时髦，让用户感到困惑。这种形式没有意义，他只是为了好玩。

它不应该使页面完全空白，否则它看起来会无意中损坏。他希望让它看起来故意坏了。

我希望让 DOM 元素融化/掉到页面底部，像飓风一样旋转，或者只是一些滑稽而格格不入的东西。

我不确定是否存在已经可以执行上述任何操作的库，因此我首先将网站上的所有元素（DOM 中的所有元素）随机旋转并重新对齐到随机绝对位置并随机旋转。

jQuery( function($)
{
    jQuery( 'input[type="submit"]' ).on( 'click', function(e)
    {
        e.preventDefault();

        jQuery( "*" ).each(function()
        {
            rotateX = Math.floor((Math.random() * 360) + 1);
            rotateY = Math.floor((Math.random() * 360) + 1);
            rotateZ = Math.floor((Math.random() * 360) + 1);
            positionX = Math.floor((Math.random() * (window.innerWidth/2) + 1);
            positionY = Math.floor((Math.random() * (window.innerHeight/2) + 1);

            if (
                $(this).context.tagName != 'HTML' &&
                $(this).context.tagName != 'BODY' &&
                $(this).context.tagName != 'HEAD'
            )
            $(this).css({
                transform: "rotate3d("+rotateX+","+rotateY+","+rotateZ+")",
                position: "absolute",
                top: positionY,
                right: positionX
            });
        });
    });
});

它工作正常，在JSBin 中不太好，但它让用户混淆它在做什么并且并不滑稽。

是否有人对如何减慢动画速度、我可以使用的更有趣的脚本或已经具有此类 DOM 随机化效果的库有任何建议？

Answer 1

这样的 CSS 应该可以解决问题：

*{
    transition: all 2s;
    -webkit-transition: all 2s;
}