Question

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

我希望它只有左上六角形可见，而其他的则在X轴上旋转，因此它们不可见，当我点击左上六边形时，所有其他六角形开始旋转“3D - 像“一个接一个地定期间隔，像这样：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转换的类来解决它，但正如你在这里看到的那样：{{3我遇到了两个问题：

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

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

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

Answer 1

我不知道这究竟是你想要的，但这里有一些东西：

JsFiddle

简而言之，你不需要jQuery，因为JS只需通过改变实际值就可以轻松触发CSS3转换：

elem.style.property = 'value'

那就是说你可以用“getElementsByClassName”获取所有元素的列表并遍历所有元素（跳过第一个，从而在1处开始）然后改变值。

由于你不希望所有这些都同时翻转，我只是将代码放在一个区间中并使用被调用的函数来增加i。

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

如何在带有延迟的多个元素上使用带有jQuery的animate（）的CSS'“rotateX（）”

1 个答案: