4

I am trying to create a function where a #div will TILT 15 degrees to the left on click, and then go back to the previous position shortly after, but I think this can be easily added to the solution with adding a Timing event. But the Tilt is what I am having the most trouble with. Ideally I would do this with JavaScript alone; but would be open to jQuery and or CSS3.

I have used the below snippet while creating a custom shake.

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

But it doesn't allow; or I have had no such luck -- creating a 'TILT' effect, only a horizontal or vertical side to side effect. I am assuming I may need to get some CSS3 in there. Any pointers?

DISCLAIMER: I am hoping for a solution of primary JavaScript; as I am supporting IE 9+ / Modern Browsers (chrome, ff, safari). Otherwise there is no real point of implementing at this point. Thanks.

4

4 回答 4

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

于 2013-07-02T19:04:11.010 回答
0

你可以用 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";
}
于 2013-07-02T18:57:57.113 回答
0

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

您必须为每个单独的动画步骤执行此操作，因此更加冗长。

于 2013-07-02T18:58:33.147 回答
-1

您必须使用 Interval 函数，而不是使用限制为 3 的 for 循环。在 JS 中有几种方法可以执行 Interval 函数，您可以使用 setInterval(?,?)，并将函数名称和间隔传入毫秒应该可以解决问题

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

试试jQuery：setInterval

于 2013-07-02T18:49:50.193 回答