小编Jus*_*ald的帖子

好吧,这个问题给我带来了很多问题.

将css3 -webkit-transform样式与任何类型的3d旋转(例如rotateY(30deg))一起使用时,将click事件绑定到此旋转对象是极不可靠的.

请参阅下面的示例代码或查看此小提琴(要查看小提琴中的不可靠性,请单击元素的右侧).此示例没有动画但仍受影响.

HTML:

<div id='box1'>Click this box.</div>

CSS:

#box1{
    -webkit-transform: rotateY(30deg);
}

jQuery的:

$('#box1').click(function(){
    alert('clicked box 1');
});

我的意思是'不可靠'是不会总是抛出click事件(取决于你点击它的位置),有时事件根本不会被抛出(无论你在哪里点击它).

有没有办法解决或避免这种情况,以便旋转和动画时它与CSS3元素一起使用？

更新:

在元素上使用CSS属性"float:left"似乎允许它在不运动时正确检测点击事件.有谁知道为什么浮动属性修复了这个？

我的最终目标是让对象在运动时接收点击事件,但是,当我应用新的CSS3 rotate3d属性(实时,在另一个jquery事件上)给出对象动画时,click事件再次开始失败.

我无法将一个元素居中放置在另一个已修复的元素中：

bottombanner 在 html 正文中：

<div id="bottombanner">
<div>
    <ul>
        <li><a href="contact.html">ContactUs</a></li>
        <li><a href="about.html">AboutUs</a></li>
        <li><a href="help.html">Help</a></li>
        <li><a href="bugs.html">BugReportBox</a></li>
        <li><a href="suggestions.html">SuggestionBox</a></li>
    </ul>
</div>
</div>

css 已正确链接：

    #bottombanner{
    position:fixed;
    width:100%;
    bottom:0;
    }

    #bottombanner > div {
    position:absolute;
    width:100%;
    }

    #bottombanner > div > ul {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    -webkit-margin-start: auto;
    -webkit-margin-end: auto;
    -webkit-padding-start: 0;
    }

我的例子是一个使用CSS3转换和转换的旋转动画多维数据集.

问题是,在这个jsfiddle的起始位置似乎没有可能的CSS3旋转来显示'4'面(左旋一个).

JSFiddle的基本指令: 'x'键使用CSS3设置立方体样式rotateX:90deg,'y'表示rotateY,'z'表示rotateZ.单击"重置"按钮返回起始位置.注意*无论旋转(x,y或z),我都不能让立方体向左旋转一个位置.

我正在使用CSS3 rotate3d属性rotateX,rotateY并rotateZ使用transition影响该transform属性的CSS3 .

此外,值得一提的是,使用rotateX/Y/Z属性允许立方体在几乎所有其他位置/方向上向上,向左,向右或向下旋转.

问题:

这里有什么问题？这种轮换不可能吗？CSS3旋转有问题,还是我的代码/逻辑中存在问题？

最佳答案将解释CSS3 rotate3d转换如何工作(幕后;数学上).