圆形视频的 rotate 问题

山人

视频要弄成圆形，需要宽高设置为一样，同时在CSS中要有 object-fit: cover; 一句，它能确保视频铺满整个预设尺寸。CSS 和 HTML 代码如下：

CSS：

.vid {
   width: 300px;
   height: 300px;
   object-fit: cover;
   border-radius: 50%;
}

HTML：

<video class="vid" src="视频地址" autoplay="autoplay" loop="loop" muted="muted"></video>
	

这时候，一切正常。但当我们加入 @keyframes 动画并在 .vid 中通过 animation 运行，问题可能就会出现：在版本较低的 chromium 内核的浏览器中，会有两个三角形包夹着圆球。当然，这只是可能，因为，在高版本的 chromium 内核的浏览器中一切还是正常的。现在，chromium内核版本主号已经超过100了，但多数国内封装的浏览器所使用的内核还在100以内，通常都是80多。

下面给出加入了动画的代码，并在本楼运行：

<style>
.vid {
   width: 300px;
   height: 300px;
   object-fit: cover;
   border-radius: 50%;
   animation: rot 6s linear infinite alternate;
}

@keyframes rot {
   to { transform: rotate(360deg); }
}
</style>

<video class="vid" src="视频地址" autoplay="autoplay" loop="loop" muted="muted"></video>
	

山人

解决办法：切割——

clip-path: circle(50% at 50% 50%);

上面 clip-path 属性设定，将视频以圆心为基准，以50%为{xy}半径，动刀裁剪视频。此句放入 .vid 选择器中。

山人

山人

剪裁之后，效果如上楼所示，较低chromium内核的浏览器也能显示纯粹的圆球

红影

原来是 animation 运行带来的问题，剪一下就干净了，真好。谢谢山人

马黑黑

如果不用 rotate，之用平移 translate，不剪裁也没问题