Объединение функций преобразования CSS3 из нескольких селекторов в таблицу стилей

Допустим, у меня есть 2 DIV:

​

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Я хочу повернуть их обоих:

div {
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
}

А то я хочу их двигать самостоятельно:

.div1 {
    background-color: red;
    -webkit-transform: translate(100px,0px);
    -moz-transform: translate(100px,0px);
}
.div2 {
    background-color: green;
    -webkit-transform: translate(0px,100px);
    -moz-transform: translate(0px,100px);
}​

Проблема в том, что и вращение, и перемещение используют свойство transform, поэтому перемещение имеет приоритет над вращением. Можно ли складывать значения вместе, а не переопределять друг друга?

Примечания:
Я буду использовать сложные функции преобразования, а не простые преобразования, поэтому я не могу заменить их только свойствами leftи top.
У меня много DIV,поэтому намного эффективнее выбрать их все и применить их общие свойства, прежде чем назначать их индивидуальные свойства.

Ссылка:jsFiddle