대각선 전환은 어떻게합니까?

Question

아무도 시체를 어떻게 이런 식으로 전환하는 방법에 대한 아이디어를 줄 수 있습니까?

A :

B는 :

주요 목표는 사업부 A의 및 DIV의 B의 내용이 자신의 위치에 고정 보일 것입니다.

내가 원하는 건 THIS IS (완료되지 않음) 내가 사진을 업데이트하고이 바이올린입니다 :이 라인의 오른쪽 하단과 상단 왼쪽 상단 화면에서 이동이 개 쌓인 사업부와 대각선을 고려 사업부입니다 이 광고의 A '및 아래쪽으로 DIV B이다

 $('#menu-show').on('click',function(){ 
 
      $('#menu-wrapper,#menu-show,#menu-container').addClass('visible'); 
 
     });

#menu-show { 
 
    width: 200px; 
 
    height: 200px; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: url(/Content/img/menu-show.png); 
 
    background-repeat: no-repeat; 
 
    z-index: 299; 
 
    cursor: pointer; 
 
    transition: all 1s 0.1s; 
 
} 
 

 
    #menu-show.visible { 
 
     -moz-transform: translate(50%,50%); 
 
     -ms-transform: translate(100%,100%); 
 
     -o-transform: translate(100%,100%); 
 
     -webkit-transform: translate(100%,100%); 
 
     transform: translate(100%,100%); 
 
    } 
 

 
#menu-container { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: -100%; 
 
    left: -100%; 
 
    z-index: 220; 
 
    background-image: url(/Content/img/home/map1.png); 
 
    background-position: center; 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    transition: all 1s 0s; 
 
} 
 

 
    #menu-container.visible { 
 
     top: 0%; 
 
     left: 0%; 
 
    } 
 

 
#menu-wrapper { 
 
    position: fixed; 
 
    top: -200%; 
 
    left: -200%; 
 
    background: blue; 
 
    z-index: 200; 
 
    width: 200%; 
 
    height: 300%; 
 
    -webkit-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
    -webkit-transform-origin: 50% 50%; 
 
    transform-origin: 50% 50%; 
 
    transition: -webkit-transform 1s .4s; 
 
    transition: transform 1s .4s; 
 
    transition: transform 1s .4s,-webkit-transform 1s .4s; 
 
} 
 

 
    #menu-wrapper.visible { 
 
     -webkit-transform: translate(60%,50%) rotate(-45deg); 
 
     transform: translate(60%,50%) rotate(-45deg); 
 
     transition-delay: 0s; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div> 
 
    Consider this as div b that have content click top left area for transition!!! 
 
    </div> 
 
    <div id="menu-show"></div> 
 
    <div id="menu-wrapper"> 
 
     this is contents 
 
    </div> 
 
    <div id="menu-container" style="margin:100px auto;">this content should be fix not moving</div>

Answer 1

사용자는 오버레이 :after 가상 요소를 사용하여 그 위치 (O)를 변화시킬 n 호버. 중요한 부분은 overflow: hidden (.element)입니다.

.element { 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.element:after { 
 
    content: ''; 
 
    background: black; 
 
    width: 200%; 
 
    height: 200%; 
 
    position: absolute; 
 
    left: -80px; 
 
    top: 0; 
 
    transform: rotate(-40deg); 
 
    transition: all 0.3s ease-in; 
 
} 
 
.element:hover:after { 
 
    left: 200px; 
 
}

<div class="element"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non aut, quisquam iusto eaque nobis perferendis ad quos, laudantium laboriosam nostrum quibusdam, illo ea inventore quidem! 
 
</div>

또한

.element { 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.element:after { 
 
    content: ''; 
 
    background: black; 
 
    width: 200%; 
 
    height: 200%; 
 
    position: absolute; 
 
    left: -80px; 
 
    top: 0; 
 
    transform: rotate(-40deg); 
 
    transition: all 0.3s ease-in; 
 
} 
 
.element:hover:after { 
 
    transform: rotate(-40deg) translateY(150px); 
 
}

<div class="element"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non aut, quisquam iusto eaque nobis perferendis ad quos, laudantium laboriosam nostrum quibusdam, illo ea inventore quidem! 
 
</div>