css - 我需要让三个视频围绕一个位于中心的分区旋转，有点像粉丝

Question

我有三个视频，它们的两个角都有边框半径。此外，它们有一些旋转，因为我需要它们以特定角度。他们围绕着一个部门，就像一个按钮。当我将鼠标悬停在按钮上时，视频会显示出来（一开始它们的不透明度为 0），它们会缩放到两倍大小，并且保持它们的角度（使用变换：旋转）。我需要让这些视频围绕中心的分割旋转，但我还没有找到方法来旋转视频的角度并使它们同时旋转。我只尝试过转换、动画和javascript。

    #contenedor {
    position: relative;
    max-width: 800px;
    min-height: 700px;
    top: 40px;
    width: 90%;
    background-color: rgba(3,7,36,1.00);
 }
#boton{
position: absolute;
top: 345px;
left: 395px;
width: 20px;
height: 20px;
background-color: rgba(250,201,153,1.00);
-webkit-border-radius: 50%;
border-radius: 50%;
}
#vid1{
position: absolute;
top: 345px;
left: 135px;
width: 200px;
height: 112px;
z-index: 10;
opacity: 0%;
transition: 2s;
-webkit-transform: rotate(-45deg) scale(0.5);
transform: rotate(10deg) rotateY(180deg) scale(0.5);
-webkit-border-top-right-radius: 50%;
border-top-right-radius: 300%;
-webkit-border-bottom-left-radius: 50%;
border-bottom-left-radius: 300%;
}
#vid2{
position: absolute;
top: 140px;
left: 365px;
width: 200px;
height: 112px;
z-index: 10;
opacity: 0%;
transition: 2s;
-webkit-transform: rotate(-45deg) scale(0.5);
transform: rotate(-40deg) rotateY(180deg) scale(0.5);
-webkit-border-top-right-radius: 50%;
border-top-right-radius: 300%;
-webkit-border-bottom-left-radius: 50%;
border-bottom-left-radius: 300%;
}
#vid3{
position: absolute;
top: 430px;
left: 425px;
width: 200px;
height: 112px;
z-index: 10;
opacity: 0%;
transition: 2s;
-webkit-transform: rotate(-45deg) scale(0.5);
transform: rotate(-110deg) rotateY(180deg) scale(0.5);
-webkit-border-top-right-radius: 50%;
border-top-right-radius: 300%;
-webkit-border-bottom-left-radius: 50%;
border-bottom-left-radius: 300%;
}

这是我的容器，“boton”是中心的按钮，以及三个视频。

   #boton:hover ~ #vid1{
opacity: 100%;  
transform: rotate(10deg) rotateY(180deg) scale(1);
    }
#boton:hover ~ #vid2{
opacity: 100%;
transform: rotate(-40deg) rotateY(180deg) scale(1);
    }
#boton:hover ~ #vid3{
opacity: 100%;  
transform: rotate(-110deg) rotateY(180deg) scale(1);
    }

悬停使视频更大，可见并保持其角度。现在，我怎样才能让视频旋转？我认为 transform-origin 应该有效，但它没有。

标签： css