Question

I’ve been playing with progressive transforms in CSS coupled with transitions. It’s looking pretty good so far, but I’d like to know how I can make it generic – that is, for any amount of children.

The dabblet/gist is here – and you can see straight away that this is hardcoded for a small amount of children. I don’t want to have to write div+div+div+div.... rules as below – there’s probably a neat way to achieve this, but would welcome any ideas.

.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;
}

edit: I realise they are just webkit rules for now too 😉

Answer 1

A quick glance at your code:

http://dabblet.com/gist/2574800

For the second, modified fan, only the .fan:hover div rule applies, but thanks to nesting the transform rules get applied multiple times on your divs, so the first div gets rotated 10deg, the second 10+10deg and so on…
You might hav to adjust the rules further, but the principle is clear i think.