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/