嵌入式元素（如youtube）的2D转换

Question

我正在考虑使用CSS在我的网站上转换YouTube视频。

我知道这是可能的，因为我已经开始在jsFiddle中这样做了，但这会降低页面速度，或者因为这个原因可能会出现什么障碍，如果有的话？

我的例子使用......

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

http://jsfiddle.net/Liamatvenn/Vh6C7/

Answer 1

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

至于你的问题，任何转换都会明显降低页面的加载速度，但2D转换不像3D那样密集。然而，3D变换实际上会使用GPU（有些人会编写一个非重复的3D变换以强制GPU渲染，从而导致更快的速度）渲染，所以如果你最终做了很多转换，切换到使用3D变换。

永远不要在您的视频或嵌入内容上使用web-filter s（模糊，棕褐色，黑白，对比等），这些肯定会降低加载速度，并且会变得极其错误和毛刺。 web-filter对视频效果不佳。

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