Question

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

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

谢谢！ :)

Answer 1

不确定是否有直接的方式，但这里有一个带有:before和:after伪元素的黑客来实现向内曲线。

＆＃13;

#video-player {
  width: 200px;
  height: 150px;
  background: #ccc;
  position: relative;
}
#video-player:after,
#video-player:before {
  position: absolute;
  height: 150px;
  width: 400px;
  border-radius: 50%;
  background: white;
  z-index: 1;
  content: " ";
}
#video-player:after {
  top: 120px;
  left: -100px;
}
#video-player:before {
  top: -120px;
  left: -100px;
}

＆＃13;

<div id="video-player">

</div>

＆＃13;

Answer 2

TL; DR：不，您不能在2016/2

之前对HTML元素进行曲线处理

你说你不想这样做但是，你可以尝试渲染一个弯曲的平面视频，你的UI在WebGL（或三个.js）中用它弯曲全部手动实现（不使用HTML元素）。 There's an example of video in three.js here

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

有没有办法曲线元素？

2 个答案: