Rotate Block in Cycle
Привет всем читателям!
У меня возник вопрос: как сделать поворот на N-градусов (от -40 до +40| соответственно рандомом), для n-блоков.. дабы блоки добавляются в цикле с помощью php(и количество мы их точное никогда не знаем), и все должны быть повернуты, и желательно "раскиданы" внутри бОльшего блока.. Всем спасибо заранее.. Принимаются: мысли, ссылки, идеи, ну и самым большим призом был бы код P.s. просьба без сторонних фреймворков.. |
каким боком php+ html(xhtml)+css k javascript?
|
Очень интересно ) может быть php + ajax + html + css + js, пропустить ajax тут никак не получится. А дальше зависит от того что за блоки, можно использовать либо css transform https://developer.mozilla.org/en/CSS/transform, либо canvas и его rotate http://habrahabr.ru/qa/4758/, либо что то другое...
|
Цитата:
|
Цитата:
|
А вы видите слово div в тексте ТС? Он говорит про блоки, я могу еще раз написать - все зависит от содержимого блоков
|
Цитата:
Цитата:
ясно ведь сказано Цитата:
Цитата:
|
Дабы приунять холивар поясню: блок (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 совсем не пройдёт.. |
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";
}
|
То что вы хотите сделать из кода "спагетти" - не хорошо. Имхо, не стоит все складывать вместе. Получите отдельно все блоки через пхп, выведите в js переменную, а затем с помощью с js раскидайте их по странице как вам нужно - будет удобнее изменять в дальнейшем.
Раскидать рандомно: использовать margin, либо указать у родителя position: relative | absolute, и затем позиционировать элементы внутри с помощью left и top. Цитата:
|
| Часовой пояс GMT +3, время: 21:01. |