jquery.transit:给定点的旋转

Question

我用中转插件旋转一个<div>。这个旋转元素的中心点，但我想旋转他们从底部的中心点。有可能吗？这是<div>的风格

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

我要把它从底部的三角形头上旋转。

更新：

您可以在这里看到代码：http://jsfiddle.net/BbKLM/2/

Answer 1

即使在较旧的IE版本(没有动画支持)中也是如此：

        var x = $('#tri1').outerWidth() / 2;
        var y = $('#tri1').outerHeight();
        $('#tri1').css({ transformOrigin: x + 'px ' + y + 'px' });

有关完整代码，请参见这个JSFiddle。

Answer 2

您可以使用CSS3 3的transform-origin，并将其设置为center bottom。对于webkit/chrome，请使用-webkit前缀：

-webkit-transform-origin: center bottom;

更新小提琴：http://jsfiddle.net/BbKLM/4/