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/