Rotate Block in Cycle

[gJam]

Привет всем читателям!
У меня возник вопрос: как сделать поворот на N-градусов (от -40 до +40| соответственно рандомом), для n-блоков.. дабы блоки добавляются в цикле с помощью php(и количество мы их точное никогда не знаем), и все должны быть повернуты, и желательно "раскиданы" внутри бОльшего блока..
Всем спасибо заранее..
Принимаются: мысли, ссылки, идеи, ну и самым большим призом был бы код
P.s. просьба без сторонних фреймворков..

[dmitriymar]

каким боком php+ html(xhtml)+css k javascript?

[skymanrm]

Очень интересно ) может быть php + ajax + html + css + js, пропустить ajax тут никак не получится. А дальше зависит от того что за блоки, можно использовать либо css transform https://developer.mozilla.org/en/CSS/transform, либо canvas и его rotate http://habrahabr.ru/qa/4758/, либо что то другое...

[dmitriymar]

либо canvas и его rotate

ну поверни мне div и его любое содержимое в канве

[vadim5june]

ну поверни мне div и его любое содержимое в канве

аналог div в канве Rect легко поорачиватся

[skymanrm]

А вы видите слово div в тексте ТС? Он говорит про блоки, я могу еще раз написать - все зависит от содержимого блоков

[dmitriymar]

аналог div в канве Rect легко поорачиватся

чего? как фигура стала аналогом элемента html div?

А вы видите слово div в тексте ТС? Он говорит про блоки, я могу еще раз написать - все зависит от содержимого блоков

что canvas и её rotate может повернуть из того что не может css transform?
ясно ведь сказано

дабы блоки добавляются в цикле с помощью php(и..

а аякс каким боком здесь ,даже к канве?

может быть php + ajax + html + css + js, пропустить ajax тут никак не получится....

[gJam]

Дабы приунять холивар поясню: блок (div)
По поводу php он тут даже очень сильно связан с html/css/js так, что все блоки(ну вы поняли, что div'ы)) выводятся в цикле из ассоциативного массива..

Ajax тут не нужен, он лишняя нагрузка и трата ресурсов..

С ротэйтом я разобрался еле-еле вида:

style=”<?php $rotation=rand(1,10) – 5 ?>  /*тут только подправить диапазон и градус готов*/
-o-transform:rotate(<?php echo $rotation; ?>deg);
-webkit-transform:rotate<?php echo $rotation; ?>deg);
-moz-transform:rotate(<?php echo $rotation; ?>deg);”

Наглядный пример
Так вот в продолжении разговора: как все-таки "разбросать" блоки (div'ы, div'ы эти несчастные)) рандомно, вариант с включением php совсем не пройдёт..

[dmitriymar]

var col=document.getElementsByTagName('div');// если в отдельном элементе,заменить document на него
for (var i=0, m=col.length;i<m;i++)
 {
   col[i].style.left=случ число+"px";
   col[i].style.top=случ число+"px"; 	 
 }

[skymanrm]

То что вы хотите сделать из кода "спагетти" - не хорошо. Имхо, не стоит все складывать вместе. Получите отдельно все блоки через пхп, выведите в js переменную, а затем с помощью с js раскидайте их по странице как вам нужно - будет удобнее изменять в дальнейшем.

Раскидать рандомно: использовать margin, либо указать у родителя position: relative | absolute, и затем позиционировать элементы внутри с помощью left и top.

что canvas и её rotate может повернуть из того что не может css transform?

поверьте - многое, не холивара ради )