Question

Question #1

In this fiddle, the flag raises above the pole

Current Transition

Expected Transition

and restores to expected position after transition is complete, but i am looking for a smooth transition as how a flag naturally hoisted, any suggestions please? Am i missing some thing?

Question #2:

Why does the following code do not work

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

while the following code works

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

Am i not supposed to hover on an <image> tag? Does CSS do not support it?

Answer 1

Take a look at -webkit-transform-origin.

I changed your CSS a little bit to account for the changes:

#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);
}​

Demo: http://jsfiddle.net/YMw3v/6/