video标签自适应屏幕翻转
时间: 2023-06-30 17:20:07 浏览: 62
要实现video标签自适应屏幕翻转,可以使用CSS3的@media查询和transform属性。具体步骤如下:
1.在CSS中为video标签设置样式,包括宽度、高度和位置等等。
2.使用@media查询,检测屏幕是否横屏或竖屏,设置不同的样式。
3.在@media查询中,使用transform属性将video标签旋转90度。
示例代码如下:
```
/* 设置video标签样式 */
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 竖屏时不旋转 */
@media screen and (orientation: portrait) {
video {
transform: none;
}
}
/* 横屏时旋转90度 */
@media screen and (orientation: landscape) {
video {
transform: rotate(90deg);
transform-origin: left top;
width: 100vh; /* 宽高互换 */
height: 100vw;
top: 100%; /* 调整位置 */
right: 0;
}
}
```
这样就可以实现video标签自适应屏幕翻转了。