旋转 HTML 5 视频而不旋转控件？答案

【问题标题】：Rotate HTML 5 video without also rotating controls?旋转 HTML 5 视频而不旋转控件？
【发布时间】：2014-05-20 14:01:24
【问题描述】：

使用 CSS transform() 属性（以及 -moz-、-webkit- 等版本），可以轻松旋转 HTML 5 视频：

video {
   transform:rotate(90deg);
}

但是，这会随视频一起旋转控件。有什么方法可以让视频本身旋转而不旋转控件？

【问题讨论】：

你是自己写播放器，还是使用插件？
自己编写播放器。
酷。你能发布一些代码来展示你所拥有的吗？
这是最低要求：<video src="movie.mp4" controls></video>

标签： html css rotation html5-video

【解决方案1】：

好的，我明白了，您正在使用本机视频控件。如果您想单独设置它们的样式，您需要做的是构建自定义控件。这是一个很好的教程，关于如何做到这一点http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos。希望这会有所帮助

【讨论】：

【解决方案2】：

好的，用于下一个旋转控制。在 Css 中添加：

video::-webkit-media-controls {
 transform: scale(-1, 1);
    -webkit-transform:scale(-1, 1); /* Safari and Chrome */
    -moz-transform:scale(-1, 1); /* Firefox */
}
video::-webkit-media-controls-enclosure {
 transform: scale(-1, 1);
    -webkit-transform:scale(-1, 1); /* Safari and Chrome */
    -moz-transform:scale(-1, 1); /* Firefox */
}

【讨论】：