jquery - jquery.transit: rotation about given point

Question

I'm using transit plugin to rotate A<div>. This rotate the element about center point, but I want to rotate them from bottom-center point. Is it possible? It's the style of <div>:

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

Exactly I want rotate it from head of triangle in bottom.

UPDATE:
You can see the code here: http://jsfiddle.net/BbKLM/2/

Answer 1

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

-webkit-transform-origin: center bottom;

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

Answer 2

This works even in older IE versions (Without animation support):

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

See this JSFiddle for complete code.