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/

Answer 2

回答问题＃2

你的悬停不起作用的原因是因为标志位于轮询后面，所以它忽略了光标。

将以下内容添加到#post

pointer-events: none; 

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