javascript - 完全旋转和随机化所有 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;
}