未知数量 child 的 CSS3 渐进式变换

Question

我一直在玩 CSS 中的渐进式变换和过渡。到目前为止它看起来还不错，但我想知道如何让它变得通用——也就是说，适用于任何数量的 child 。

dabblet/gist 是 here - 你可以立即看到这是为少量 child 硬编码的。我不想编写如下所示的 div+div+div+div.... 规则 - 可能有一种巧妙的方法可以实现这一点，但欢迎提出任何想法。

.fan:hover div {
    -webkit-transform: rotate(10deg);
    top: -10px;
    left: 5px;
    box-shadow: 0 2px 10px rgba(128,128,128,0.3);
}
.fan:hover div+div {
    -webkit-transform: rotate(20deg);
    top: -15px;
    left: 10px;
}
.fan:hover div+div+div {
    -webkit-transform: rotate(30deg);
    top: -20px;
    left: 15px;
}

编辑:我意识到它们现在也只是 webkit 规则 ;)

Answer 1

快速浏览一下您的代码:

http://dabblet.com/gist/2574800

对于第二个修改过的扇形，只有 .fan:hover div 规则适用，但是由于嵌套变换规则在您的 div 上应用了多次，因此第一个 div 旋转了 10 度，第二个 10+10deg 等等...您可能需要进一步调整规则，但我认为原则很明确。