CSS3歪变换

Question

问题#1

在this fiddle , 旗帜在旗杆上方升起

当前转换

预期的过渡

并在过渡完成后恢复到预期位置，但我正在寻找一个平稳的过渡，因为旗帜是如何自然升起的，请问有什么建议吗？我错过了什么吗？

问题 #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/