css - CSS3 曲がった変換

Question

質問1

このフィドルでは、旗がポールの上に上がります

現在の推移

予想される移行

トランジションが完了した後、期待される位置に戻りますが、フラグが自然に上がる方法としてスムーズなトランジションを探しています。何か提案をお願いします。何か不足していますか？

質問2：

次のコードが機能しないのはなぜですか

#flag:hover{
    top:50px;
    left:100px;
    -webkit-transform:rotate(0deg);
}​

次のコードが機能している間

#container:hover #flag{
    top:50px;
    left:100px;
    -webkit-transform:rotate(0deg);
}​

<image>タグにカーソルを合わせる必要はありませんか? CSSはそれをサポートしていませんか?

Answer 1

を見てください-webkit-transform-origin。

変更を考慮して、CSSを少し変更しました。

#flag{
    position:relative;
    top: 43px;
    left: 120px;

    -webkit-transform-origin: -10px 0px;
    -webkit-transform:rotate(90deg);
    -webkit-transition-duration:0.5s;
    -webkit-transition-timing:ease-in;

}
#post{
    position:absolute;
    top:50px;
    left:50px;

}
#container:hover #flag{
    top: 54px;
    left: 104px;
    -webkit-transform:rotate(0deg);
}​

デモ： http： //jsfiddle.net/YMw3v/6/

Answer 2

質問2に答えるには

ホバーが機能しない理由は、フラグがポーリングの背後にあるため、カーソルを無視するためです。

以下を#postに追加します

pointer-events: none; 

http://jsfiddle.net/YMw3v/7/