Вложено и повёрнуто

Вложено и повёрнуто (85.42КиБ)

С тех пор как в браузерах появилась возможность свободно вращать любые объекты, мне нравится смотреть что из этого можно сделать, причём нравится экспериментировать с одинаковыми многократно вложенными объектами.

Т. е. поворот в CSS я задаю на один и тот же градус, но поскольку объекты вложены друг в друга, родительский угол тоже учитывается и получаются разнообразные кольца с регулярным рисунком. Если подключить к этому графику (тот же SVG), то всякие рождественские венки и прочие кольца со сложными, но повторяющимся рисунком, можно делать очень естественными образом.

Кстати, а если наложить несколько изображений с разным шагом и z-index, вообще страшно подумать какие рисунки можно выводить!

Комментарии 15

Горбунов Олег № 1
Кстати, а если наложить несколько изображений с разным шагом и z-index, вообще страшно подумать какие рисунки можно выводить!

Не оно? — http://designfestival.com/the-cicada-princ … designers/

htmlhero.ru № 3
Один только недостаток вижу — один лепесток всегда выше других, а в реальности он залазит под следующий.
Евгений Степанищев (bolknote.ru) автор № 6
Один только недостаток вижу — один лепесток всегда выше других, а в реальности он залазит под следующий.

Ага, я пока не придумал что с этим делать и не уверен, что пока будут этим заниматься. По крайней мере, пока мне это где-то реально не понадобится.

SiMM (mr-simm.livejournal.com) № 4
мне нравится смотреть что из этого можно сделать

Изменение количества элементов ещё добавьте :) Ну и может стоит поменять положение бегунков (поставить слева) — на больших мониторах площадь получается ограниченной — итог выходит за правый край.

Евгений Степанищев (bolknote.ru) автор № 7
Кстати, получается анимированный собачий хвост на чистом CSS, если сделать изменение только одного параметра — угла.
masterspammer (masterspammer.livejournal.com) № 8
Комментарий для Евгения Степанищева:

См. также «perlin worms» (не во время еды!).
Agonych (agonych.livejournal.com) № 13
По идее можно нарисовать и крутить стык-встык пересечение лепестков, в этом случае все лепестки будут правильно накрываться друг на друга. Либо последний лепесток нарисовать поверх первого и обрезать на половину.