可通过CSS transform:rotate静态旋转、JavaScript动态修改transform、CSS变量配合transition实现平滑旋转、调整transform-origin绕不同轴心旋转，以及禁用原生控件并自定义交互层解决控件错位问题。
如果您希望在网页中实现HTML5视频的旋转效果，可以通过CSS的transform:rotate属性或JavaScript动态控制video元素的旋转角度。以下是几种具体可行的操作方式：
一、使用CSS transform:rotate静态旋转视频
该方法适用于需要固定角度旋转（如90度、180度）的场景，通过为video元素添加内联样式或外部CSS类，直接应用旋转变换。
1、在HTML中定义video标签，并为其设置class属性，例如class="rotated-video"。
2、在
立即学习“前端免费学习笔记（深入）”；
3、确保video元素具有明确的宽高或使用object-fit保持内容比例，避免旋转后布局错乱。
二、通过JavaScript动态修改transform旋转角度
该方法允许在运行时根据用户交互或逻辑条件实时调整视频旋转角度，适用于需响应按钮点击、滑块拖动等操作的场景。
1、为video元素设置id，例如id="myVideo"。
2、编写JavaScript函数，获取该元素并修改其style.transform属性：document.getElementById("myVideo").style.transform = "rotate(135deg)";。
3、将该函数绑定到事件监听器上，例如click事件或input事件，实现交互式旋转控制。
三、使用CSS自定义属性配合JavaScript实现平滑旋转
该方法利用CSS变量与transition结合，使旋转过程具备动画过渡效果，提升视觉体验。
1、在video元素的CSS中定义transform属性为：transform: rotate(var(--rotate-angle, 0deg)); 并添加transition: transform 0.3s ease;。
2、在JavaScript中通过setProperty设置CSS变量值：videoElement.style.setProperty("--rotate-angle", "270deg");。
3、确保video元素已渲染且CSS变量作用域正确，避免因样式未生效导致无旋转反应。
四、绕不同轴心点旋转视频
默认情况下transform-origin为center，但可通过修改该属性实现以左上角、底部中心等位置为支点的旋转效果，适用于特殊布局需求。
1、在CSS中为video元素指定transform-origin，例如transform-origin: top left;。
2、配合rotate使用，如transform: rotate(-90deg) translateX(-100%); 实现向左旋转并水平位移以保持可视区域。
3、注意浏览器对transform-origin的支持一致性，建议测试Chrome、Firefox及Safari下的实际表现。
五、处理旋转后视频控件错位问题
当video元素被旋转后，原生播放控件（如播放/暂停按钮、进度条）可能因坐标系变化而无法准确响应鼠标或触摸事件，需针对性调整。
1、禁用原生控件，改用自定义控件层：controls="false" 属性添加至video标签。
2、在video外部包裹一个relative定位的容器，并将自定义控件绝对定位在该容器内，不受旋转影响。
3、为video元素单独设置pointer-events: none; 同时为控件层设置pointer-events: auto; 确保交互区域正常响应。
