css - 嵌入元素的 2D 转换，例如 youtube

Question

我正在研究使用 CSS 来转换我网站上的 YouTube 视频。

我知道这是可能的，因为我已经开始在 jsFiddle 中这样做，但这会减慢页面速度，或者因此可能会出现什么障碍（如果有的话）？

我的例子使用...

transform: scale(0.8) rotate(2deg);

http://jsfiddle.net/Liama​​tvenn/Vh6C7/

Answer 1

好的，首先你正在做的转换是 2D 而不是 3D，我已经提交了一个编辑，在你的标题中修复了这个问题。

至于您的问题，任何转换显然都会减慢页面的加载速度，但是 2D 转换不如 3D 密集。但是，3D 变换实际上会使用 GPU（有些人会写一个非结果性的 3D 变换以强制 GPU 进行渲染，从而导致更快的速度）进行渲染，所以如果你最终做了很多变换，请切换到使用 3D 变换。

切勿web-filter在您的视频或嵌入内容上使用 s（模糊、棕褐色、黑白、对比度等），它们肯定会减慢加载速度，并且看起来非常有问题和故障。web-filters 不适用于视频。

虽然您的示例只有一个 YouTube 视频，但我假设您想在同一页面上以一种很酷的方式放置多个视频。我不建议加载超过 3 或 4 个，因为加载多个嵌入式 YouTube 视频可能比转换本身更耗费加载时间。如果可以的话，我会通过预览图像链接到每个单独的视频。