CSS animation - rotate3dの 'sliding'を防ぐ

Question

私はCSSのオープニングドアの効果を作り出そうとしています。

私が持っている問題は、回転する部分もy軸に沿ってスライドすることです。ドアには回転点が固定されていますが、ここで実際には機能しません。

このスライドを防止するにはどうすればいいですか？.moverの右側の部分は、.doorの右側に固定されていますか？

.door { 
 
    background-color: blue; 
 
    width: 100px; 
 
    height:100px; 
 
    margin-left: 300px; 
 
    display: block; 
 
} 
 

 
.mover { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    transition: all 1s ease; 
 
} 
 

 
.door:hover .mover { 
 
    transform-origin: 100% 40%; 
 
    transform: rotate3d(0,1,0,180deg); 
 
}

<div class="door"> 
 
    <div class="mover">a</div> 
 
</div>

Answer 1

代わり.door:hover .moverセレクタ、ベース.moverセレクタにtransform-originを移動します。このように：

.door { 
 
    background-color: blue; 
 
    width: 100px; 
 
    height:100px; 
 
    margin-left: 300px; 
 
    display: block; 
 
} 
 

 
.mover { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    transition: all 1s ease; 
 
    transform-origin: 100% 40%; 
 
} 
 

 
.door:hover .mover { 
 
    transform: rotate3d(0,1,0,180deg); 
 
}

<div class="door"> 
 
    <div class="mover">a</div> 
 
</div>