Javascript 轻量级tilt-onClick/JS或CSS3

我试图创建一个函数，其中一个

#div

在单击时向左倾斜15度，然后很快返回到前一个位置，但我认为通过添加计时事件，可以很容易地将其添加到解决方案中。但是倾斜是我遇到的最大问题。理想情况下，我会单独使用JavaScript来实现这一点；但是将对jQuery和或CSS3开放

我在创建自定义抖动时使用了下面的代码片段

jQuery.fn.shake = function() {
    this.each(function(i) {
        $(this).css({ "position" : "relative" });
        for (var x = 1; x <= 3; x++) {
            $(this).animate({ left: -15 }, 10).animate({ left: 0 }, 50).animate({ left: 15 }, 10).animate({ left: 0 }, 20);
        }
    });
    return this;
}

jQuery.fn.shake=function（）{
这是每个功能（i）{
$（this.css（{“position”：“relative”}）；
对于（var x=1；x您必须使用区间函数，而不是使用限制为3的for循环。
在JS中有几种方法可以实现Interval函数，您可以使用setInterval（？，），并以毫秒为单位传递函数名和Interval

setInterval(localFunction, 100);    // 1 second
setInterval(globalFunction(), 200); // 2 seconds

试试看
您可以通过CSS3动画和少量javascript来实现这一点：

CSS:

Javascript:

function shake(item) {
    item.className += "rotate";
}

我认为这将是CSS动画的一个很好的候选者，因为您可以轻松定义关键帧：

#foo {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    -webkit-animation: skewer .1s;
}
@-webkit-keyframes skewer {
    0% {
        left: -15px;
        -webkit-transform: skewX(-15deg);
    }
    25% {
        left: 0;
        -webkit-transform: skewX(0deg);
    }
    55% {
        left: 15px;
        -webkit-transform: skewX(15deg);
    }
    100% {
        left: 0px;
        -webkit-transform: skewX(0deg);
    }
}


但是，
.animate
如果第二个参数是对象，则会采用
步骤
属性：

$(this).animate({ left: -15 }, {
    duration: 10,
    step: function (now) {
        $(this).css("-webkit-transform", "skewX(" + now + "deg)");
    }
})

您必须为每个单独的动画步骤执行此操作，因此更加详细。
您可以使用
变换创建“倾斜”：

.skew{
    -webkit-transform: matrix(1, 0, 0.5, 1,  50, 0);
    -o-transform: matrix(1, 0, 0.5, 1,  50, 0);
    -ms-transform: matrix(1, 0, 0.5, 1,  50, 0);
    transform: matrix(1, 0, .5, 1,  50, 0);
}


虽然浏览器兼容性可能是一个问题
tilt？您是说rotate？您可以通过调用
setInterval（）
，创建倾斜效果，但它应该是window.setInterval（？，）这对我根本不起作用；至少对你的JSFIDLE不起作用。在Chrome或Firefox中都不起作用。我同意CSS3的想法，并感谢您的回复。@1977它应该只在Chrome中起作用，对我也起作用，但我不确定你到底想做什么。我正在寻求一个具有最低限度现代浏览器支持的解决方案；这就是我想使用的原因JavaScript是最受欢迎的。这在我这边任何地方都不起作用；所以我不能在支持很少的情况下使用它，因为这没有意义。不过，非常感谢！根据链接，它说它在IE9+上受支持，我要试一试！！！所以，我正在测试@James Montagne-但是我注意到，你创造了相反的效果。我我希望“倾斜”发生在点击上，而不是visa verse。刚开始删除这个类。我更多的是演示倾斜，而不是尝试开发整个东西。
.skew{
    -webkit-transform: matrix(1, 0, 0.5, 1,  50, 0);
    -o-transform: matrix(1, 0, 0.5, 1,  50, 0);
    -ms-transform: matrix(1, 0, 0.5, 1,  50, 0);
    transform: matrix(1, 0, .5, 1,  50, 0);
}