CSS3弯曲变换

时间:2012-12-17 09:35:19

标签: css css3 transform css-transitions

问题#1

this fiddle中,旗帜高出极点

当前转换

enter image description here

预期转型

enter image description here

并在过渡完成后恢复到预期位置,但我正在寻找平稳过渡,因为旗帜如何自然悬挂,有什么建议吗?我错过了什么吗?

问题#2:

为什么以下代码不起作用

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

,而以下代码适用

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

我不应该悬停在<image>标签上吗? CSS不支持吗?

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:1)

回答问题#2

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

将以下内容添加到#post

pointer-events: none; 

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