Html 有没有一种方法可以弯曲图元？

是否有一种方法（可能使用webGL，也可能使用three.js）向内弯曲html元素？（例如，它看起来像是新的全景三星电视）

我不想创建一个弯曲的平面并使用图像作为纹理。这是一个动态的div-a视频播放器，确切地说，它有一个交互式皮肤，我想向内弯曲）

---

谢谢！：）

不确定是否有直接的方法，但这里有一个使用

：before

和

：after

伪元素实现向内曲线的方法

视频播放器{ 宽度：200px； 高度：150像素； 背景：#ccc； 位置：相对位置； } #视频播放器：之后， #视频播放器：以前{ 位置：绝对位置； 高度：150像素； 宽度：400px； 边界半径：50%； 背景：白色； z指数：1； 内容：“； } #视频播放器：之后{ 顶部：120px； 左：-100px； } #视频播放器：以前{ 顶部：-120px； 左：-100px； }

---

TL；DR：不，从2016/2起，您不能对HTML元素进行曲线化

你说过你不想这样做，但是，你可以尝试在WebGL（或three.js）中渲染一个弯曲的平面视频和你的用户界面，所有这些都是手动实现的（不使用HTML元素）

---

最大的障碍将是目前将视频导入WebGL有点沉重。大于一定尺寸的视频可能运行太慢。

您能解释一下向内曲线是什么意思吗？图片还是什么？不，到2016/2年为止，没有办法弯曲HTML元素，但这根本不是我的意思…：）我不想让球员的弧线变弯。我希望整个播放器部件向内变形-皮肤，顶部按钮。。。一切。（就像我用webGL创建了一个曲面并将播放器用作纹理一样）如果将

更改为

或