2

トランジットプラグインを使用して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/

4

2 に答える 2

1

CSS3を使用transform-originして、に設定できますcenter bottom。webkit / chromeの場合は、-webkitプレフィックスを使用します。

-webkit-transform-origin: center bottom;

更新されたフィドル:http://jsfiddle.net/BbKLM/4/

于 2012-12-30T11:31:02.580 に答える
0

これは、古いバージョンのIEでも機能します(アニメーションのサポートなし)。

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

完全なコードについては、このJSFiddleを参照してください。

于 2012-12-30T12:53:16.193 に答える