轻量级倾斜点击/JS或CSS3

Question

我正在尝试创建一个函数，在点击时，一个#div会向左倾斜15度，然后不久后返回到之前的位置，但我认为这可以通过添加定时事件轻松地解决。但是我最困扰的是Tilt。理想情况下，我只使用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;
}

但是它不允许，或者我没有那么幸运 - 创建一个“倾斜”效果，只有一个水平或垂直的左右移动效果。我猜我可能需要使用一些CSS3。你有什么指点吗？

注意：我希望使用JavaScript解决方案；因为我支持IE 9+ / 现代浏览器（Chrome、Firefox、Safari）。否则，在这个时候实现它没有真正的意义。谢谢。

- Coastal-Cam

---

倾斜？你是指旋转吗？ - epascarello

Answer 1

您可以使用transform来创建“倾斜”效果：

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

http://jsfiddle.net/HemTH/1/

虽然浏览器兼容性可能是一个问题http://caniuse.com/#search=transforms

- James Montagne

---

根据链接显示，它支持IE 9+，我要试一试!!! - Coastal-Cam

所以，我正在测试这个@James Montagne - 但是我注意到，你创建了相反的效果。我希望“倾斜”在单击时发生，而不是反过来。 - Coastal-Cam

初始时只需移除类。http://jsfiddle.net/HemTH/2/ 我更多地是在演示倾斜，而不是试图开发整个东西。 - James Montagne

Answer 2

你可以使用CSS3动画和一点点JavaScript来实现这个功能：
CSS:

.rotate {
    animation: rotate 10s;
    -webkit-animation: rotate 5s;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(15deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

Javascript：

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

- Brin Marx

Answer 3

我认为这是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);
    }
}

http://jsfiddle.net/VGGqT/

然而，如果 .animate 的第二个参数是一个对象，则需要使用 step 属性：

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

你需要为每个单独的动画步骤执行此操作，因此它会更加冗长。

- Explosion Pills

---

对于我来说，这完全没有用；至少你的jSfiddle是如此。无论是在 Chrome 还是 Firefox 中都不行。我同意 CSS3 的想法，并感谢您的回复。 - Coastal-Cam

@1977 它只能在 Chrome 中工作，它对我来说是有效的，但我不确定你确切想要什么。 - Explosion Pills

我正在寻找一种最小化现代浏览器支持的解决方案；这就是为什么我最想使用JavaScript的原因。 - Coastal-Cam

这在我的任何地方都不起作用，所以我不能使用它，因为支持太少了，没有意义。非常感谢！ - Coastal-Cam

Answer 4

你需要使用一个间隔函数，而不是使用限制为3的for循环。 在JS中有几种方法可以实现间隔函数，你可以使用setInterval(?,?)，并传递函数名和以毫秒为单位的间隔时间即可。

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

尝试使用jQuery：setInterval

- JETR NSEF

---

你可以通过调用 setInterval() 来创建倾斜效果。 - a better oliver

它应该是window.setInterval(?,?)。 - JETR NSEF