Question

我正在使用transit plugin来轮播A <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

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

-webkit-transform-origin: center bottom;

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

Answer 2

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

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

有关完整代码，请参阅this JSFiddle。

jquery.transit：关于给定点的旋转

2 个答案: