如何以文字方式使“翘曲/鱼眼"变形效果好吗? [英] How to text warp "bulge/fisheye" like effect?

问题描述

我一直在尝试找到一种方法来创建类似的效果，例如下图所示的CSS或其他任何方式.在Photoshop中，可以变换选区的网格.我尝试在包含文本的div上使用border-radius: 10% / 50%;属性，但这不影响文本，仅影响div.我也确实使用了-webkit-前缀.如果有任何方法可以产生这种效果，那就太好了.感谢您的帮助.

I have been trying to find a way to create a similar effect like the image below with CSS or any other way. In Photoshop you transform the mesh of the selection. I tried using the border-radius: 10% / 50%; property on the div containing the text but that does not affect the text, only the div. I did use the -webkit- prefix as well. If there is any way to create this effect it would be great. Help is appreciated.

推荐答案

border-radius不能为您做这种事情.目前，css标准中没有任何东西可以达到这样的效果.

border-radius can't do such thing for you. Currently there's nothing in css standard can achieve effects like this.

最近的是css transform属性(标准 )，可以对元素进行线性变换，但是图像中的效果是非线性变换.因此，您必须提供图片而不是文字.

The nearest thing is css transform property (standard) which can do linear transformation on elements, but the effect in your image is non-linear transformation. So, you have to provide image instead of text.

这篇关于如何以文字方式使“翘曲/鱼眼"变形效果好吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！