jquery - 如何在多个元素上延迟使用 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>

...等等。

从一开始就“隐藏”/rotateX 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 transition 的类可以解决它，但正如您在这里看到的那样: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”获取所有元素的列表并遍历所有元素(跳过第一个，因此从 1 开始 i)，然后更改值。

因为你不希望所有的人同时翻转，我只是将代码放在一个间隔中并使用调用的函数来增加 i。

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