CSS3 歪斜变换答案

【问题标题】：CSS3 Crooked TransformationCSS3 歪斜变换
【发布时间】：2012-12-04 09:26:41
【问题描述】：

问题 #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不支持吗？

【问题讨论】：

@Andy：我已经更新了我的问题，我想要像第二张图片那样的过渡，

标签： css transform css-transitions

【解决方案1】：

回答问题 #2

悬停不起作用的原因是标志位于民意调查后面，因此它忽略了光标。

将以下内容添加到#post

pointer-events: none;

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

【讨论】：

所以，pointer-events 禁用了所有帖子事件，所以我的图像标志收到了事件，对吗？
阅读一下 - developer.mozilla.org/en-US/docs/CSS/pointer-events

【解决方案2】：

看看-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/

【讨论】：

这很好，但我还有一个问题（对不起，如果这听起来很傻）你是如何安定于-10px 0px 的价值为-webkit-transform-origin: -10px 0px; 你做了很多跟踪和错误？跨度>
@Sudarshan：Chrome 的开发者工具可让您通过按箭头键实时调整值。我只是移动了盒子直到它看起来正确。