有没有办法弯曲元素? [英] Is there a way to curve an element?

问题描述

有没有办法(可能使用 webGL，也可能使用three.js)将 html 元素向内弯曲?(例如，它看起来像新的全景三星电视).

is there a way (probably with webGL, maybe also with three.js) to curve an html element inwards? (So it looks like the new panoramic samsung TV, for example).

澄清一下 - 我不想创建一个曲面并将图像用作纹理.这是一个动态 div - 一个视频播放器，准确地说是具有交互式皮肤，我想向内弯曲)

Just to be clear - I do not want to create a curved plane and use an image as a texture. It's a dynamic div - a video player, with an interactive skin to be exact, and I want to curved inward)

谢谢！:)

推荐答案

TL;DR:不，从 2016/2 开始，您不能弯曲 HTML 元素

TL;DR: No, you can not curve an HTML element as of 2016/2

您说您不想这样做，但是，您可以尝试在 WebGL(或three.js)中渲染一个曲面视频，并且您的 UI 与它一起弯曲，所有这些都是手动实现的(不使用 HTML 元素).这里有一个three.js中的视频示例

You said you didn't want to do this but, you could try rendering a curved plane video and your UI curved with it in WebGL (or three.js) all manually implemented (not using HTML elements). There's an example of video in three.js here

最大的障碍是目前将视频导入 WebGL 有点繁重.超过一定尺寸的视频可能运行速度太慢.

The biggest obstacle will be that currently getting video into WebGL is somewhat heavy. Video larger than a certain size might run too slow.

这篇关于有没有办法弯曲元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！