전환 및 마우스 오버 및 마우스 아웃 기능이있는 skew div 상자

Question

두 개의 비뚤어진 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>

는