如何在延迟的多个元素上使用 CSS 的“rotateX()”和 jQuery 的 animate()

Question

我正在处理一个页面布局，其中包含多个六边形 div（基本使用的简单教程可从 github 上的 jtauber 获得）布置在三行中（目前）。

我希望它只有左上角的六边形可见，而其他的在 X 轴上旋转所以它们不可见，并且当我点击左上角的六边形时，所有其他的都开始旋转“3D -like" 一个接一个地定期，像这样：http://jsfiddle.net/76q2j/10/（在这个例子中，所有都是可见的，rotateX() 是在 CSS 中的 :hover 上实现的。

到目前为止，我的 HTML 如下所示：

<div class="hex_grid">
    <!-- ROW 01 -->
    <div class="hex_row impair">
        <div id="hex0101" class="hex">
        <div class="part top"></div>
        <div class="part middle"></div>
        <div class="part bottom"></div>
    </div>
    <div id="hex0102" class="hex">
        <div class="part top"></div>
        <div class="part middle"></div>
        <div class="part bottom"></div>
    </div>
    <div id="hex0103" class="hex">
        <div class="part top"></div>
        <div class="part middle"></div>
        <div class="part bottom"></div>
    </div>

...等等。

从一开始就“隐藏”/旋转 div 的 CSS 是这样的：

.hex:not(#hex0101){
    -webkit-transform: perspective(600px) rotateX(90deg);
    -moz-transform: perspective(600px) rotateX(90deg);
    -ms-transform: perspective(600px) rotateX(90deg);
    -o-transform: perspective(600px) rotateX(90deg);
    transform: perspective(600px) rotateX(90deg);
}

最后，用于为整个事物制作动画的 IDEAL jQuery 将是这个，或者类似的东西：

$("#hex0101").click(function(event) {
    $('.hex:not("#hex0101")').each(function(i) {
        $(this).delay(100*i).animate({transform: 'rotateX(90deg)'});
    });
});

但是，经过多次试验和谷歌搜索，我在这里发现 jQuery .animate() 显然还不支持 CSS3 transforms。

我设法让六边形一个接一个地出现，只需使用任何其他类型的变换，例如

$(this).delay(100*i).animate({transform: 'skew(100px)'});

...虽然转换并没有真正发生，我暂时不知道为什么，它们只是弹出。

由于我无法让 CSS 的 transform: rotateX() 与 jQuery 的 animate() 配合得很好，我想也许添加一个带有 CSS 过渡的类可以解决它，但正如你在这里看到的：http://jsfiddle.net/76q2j/13/ 我遇到了两个问题：

1. 动画看起来不像 CSS :hover 那样漂亮（或者可能只是我......）
2. 它将额外的类同时应用于所有六边形，而不是像我想的那样一个接一个地应用

底线，或 DL;DR， 我想知道是否有人知道一个 jQuery 插件，它可以让您将 jQuery 和“高级”CSS3 transforms 结合起来，或者是否有更简单的/通过each(function(i){...}) 一次将一个额外的类应用到一个 div 的更实用/简单正确的方法。

非常感谢任何帮助！如果有不清楚的地方，我会补充更多信息，我昨晚睡得很少，所以我的大脑有点模糊......

Answer 1

我不知道这是否正是您想要的，但这里有一些东西：

JsFiddle

简而言之，您不需要 jQuery，因为 CSS3 转换可以很容易地由 JS 触发，只需通过更改实际值：

elem.style.property = 'value'

也就是说，您可以使用“getElementsByClassName”获取所有元素的列表并遍历所有元素（跳过第一个，因此 i 从 1 开始）然后更改值。

由于您不希望它们同时翻转，我只是将代码放在一个区间中，并使用被调用的函数来递增 i。

您还必须确保在处理完所有元素后停止间隔并删除“onclick”事件。