Как нанести текст «bulge/fisheye» как эффект?

Question

Я пытался найти способ создания подобного эффекта, как изображение ниже с помощью CSS или любым другим способом. В Photoshop вы преобразуете сетку выделения. Я попытался использовать свойство border-radius: 10%/50%; в div, содержащем текст, но это не влияет на текст, только div. Я также использовал префикс -webkit-. Если есть какой-либо способ создать этот эффект, было бы здорово. Помощь приветствуется.

Answer 1

border-radius не может сделать такую ​​вещь для вас. В настоящее время ничто в стандарте css не может достичь таких эффектов.

Ближайший вещь CSS transform свойства (standard), который может сделать линейного преобразование на элементах, но эффект в изображении является нелинейного преобразования. Таким образом, вы должны предоставить изображение вместо текста.