Size: a a a

HTML/CSS — русскоговорящее сообщество

2020 August 05

l

l|v|l in HTML/CSS — русскоговорящее сообщество
А как вообще грамотно это сделать? Я начал костыль делать, где я каждому лепестку задаю нужную позицию. А может правильнее было бы выставить один лепесток, и уже относительно его все остальные по кругу расставлять?
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
Oleg Shilov
попробуй сделать всем лепесткам top: 0; left: 0; и в транслейте уже калком раздвинуть их куда надо
Или так, да
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
l|v|l
А как вообще грамотно это сделать? Я начал костыль делать, где я каждому лепестку задаю нужную позицию. А может правильнее было бы выставить один лепесток, и уже относительно его все остальные по кругу расставлять?
Или может это вообще корректнее скинуть на js, а не css?
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
не тут js вообще ненужен.
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
я бы так сделал. отценнтрируй все лепестки по центру. и каждый поворачивай со сдвигом 90 градусов. тоесть у тебя у второго, третьего и четвертого будет отличаться только rotate и сдвиг в сторону от центра
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
Oleg Shilov
я бы так сделал. отценнтрируй все лепестки по центру. и каждый поворачивай со сдвигом 90 градусов. тоесть у тебя у второго, третьего и четвертого будет отличаться только rotate и сдвиг в сторону от центра
Интересно, попробую
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
Спасибо!
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
ох как лень. сча накидаю.
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
Во, я как раз про чайлд читаю))
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
такой же эффект надо?)
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
Oleg Shilov
такой же эффект надо?)
типа того, да
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
Сделал, как ты советовал. Щас читаю доки к transform-origin, и не совсем понимаю, как сделать transform-origin не прям от края элемента, к которому применяется сиа аффинное преобразование, а от этого элемента + совсем небольшое расстояние, чтобы в итоге элемента расположились вокруг кольца, а не самого элемента, к которому, повторюсь, применяется transform-origin?
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
l|v|l
Сделал, как ты советовал. Щас читаю доки к transform-origin, и не совсем понимаю, как сделать transform-origin не прям от края элемента, к которому применяется сиа аффинное преобразование, а от этого элемента + совсем небольшое расстояние, чтобы в итоге элемента расположились вокруг кольца, а не самого элемента, к которому, повторюсь, применяется transform-origin?
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
l|v|l
Сделал, как ты советовал. Щас читаю доки к transform-origin, и не совсем понимаю, как сделать transform-origin не прям от края элемента, к которому применяется сиа аффинное преобразование, а от этого элемента + совсем небольшое расстояние, чтобы в итоге элемента расположились вокруг кольца, а не самого элемента, к которому, повторюсь, применяется transform-origin?
Оно умеет проценты и пиксели
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
Oleg Shilov
Оно умеет проценты и пиксели
Вижу, да
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
Решение влоб. Внутри лепестков сделай ещё див который стилизован и разукрашен будет. И пусть он заполняет почти всего родителя с отступом снизу. Таким образом ты получишь то что хочешь)
источник

OS

Oleg Shilov in HTML/CSS — русскоговорящее сообщество
Или псевдоэлементом, хотя див тоже ок
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
Oleg Shilov
Решение влоб. Внутри лепестков сделай ещё див который стилизован и разукрашен будет. И пусть он заполняет почти всего родителя с отступом снизу. Таким образом ты получишь то что хочешь)
А, типа, сделать box для расширенного лепестка, и от него уже transform-origin делать?
источник

l

l|v|l in HTML/CSS — русскоговорящее сообщество
l|v|l
А, типа, сделать box для расширенного лепестка, и от него уже transform-origin делать?
Если да, то думается, я понял идею))
источник