どのように対角遷移を作成しますか？

Question

誰かの体は私にこのような移行をどうやって起こすかというアイデアを与えることができますか？

A：

B：

主な目標は、事業部Aのであるとのdiv Bのコンテンツは、その位置に固定しているはずです。

私が欲しいのは、THIS IS（完了していない）私は絵を更新し、これはフィドルです：この線の下右、上、左上画面から移動する2つの積み重ねのdivと対角線を考える事業部ですA」と、この行の下には、本部Bあなたがオーバーレイとして:after擬似要素を使用し、その位置Oを変えることができる

 $('#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

ありますnホバー。重要な部分はの.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>

あなたのコードを投稿することができますまた、:after

.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>