div内のdivを制御する方法は？

Question

青いボックスの上にマウスを置いてください。青色のボックスは170度回転しますが、親と重なるのはdivです。私は、親と重複することなく、青のボックスを回転させたいdiv。

.box { 
 
    width:250px; 
 
    height:250px; 
 
    background:red; 
 
} 
 
.box_inside { 
 
    position:absolute; 
 
    width:250px; 
 
    height:250px; 
 
    background:blue; 
 
    transition:all 0.7s linear; 
 
} 
 
.box_inside:hover { 
 
    -ms-transform: rotate(170deg); 
 
    -webkit-transform: rotate(170deg); 
 
    transform: rotate(170deg); 
 
}

<div class="box"> 
 
    <div class="box_inside"> </div> 
 
</div>

Answer 1

私が正しくあなたを理解していれば、あなたは親のためのoverflow:hiddenを探しています。 position:relativeも追加する必要があります。

.box { 
 
    width:250px; 
 
    height:250px; 
 
    background:red; 
 
    overflow:hidden; 
 
    position:relative; 
 
} 
 
.box_inside { 
 
    position:absolute; 
 
    width:250px; 
 
    height:250px; 
 
    background:blue; 
 
    transition:all 0.7s linear; 
 
} 
 
.box_inside:hover { 
 
    -ms-transform: rotate(170deg); 
 
    -webkit-transform: rotate(170deg); 
 
    transform: rotate(170deg); 
 
}

<div class="box"> 
 
    <div class="box_inside"> </div> 
 
</div>