遷移とマウスオーバーとマウスアウト機能を持つスキューdivボックス

Question

半幅の2つの歪みdivボックスとmouseoverの後ろに全幅をカバーし、mouseout機能によって半分の幅に収縮します。このlinkを理解するのに役立ちます。

Answer 1

.container{ 
 
    position:relative; 
 
width:100%; 
 
    height:200px; 
 
    background:#ccc; 
 
    overflow:hidden; 
 

 
} 
 
.content{ 
 
    position:absolute; 
 
    left:-150%; 
 
    width:200%; 
 
    height:100%; 
 
    background:#B51D21; 
 
    transform:SkewX(30deg); 
 
} 
 
.content:hover{ 
 
width:100%; 
 
left:0px; 
 
    transition-duration:1s; 
 
    transform:SkewX(0deg); 
 
}

<div class="container"> 
 
<div class="content"></div> 
 
</div>

あなたはこれまでにしようとしているかの詳細を追加してもらえ