小さい方の親の水平方向に回転したdiv

Question

小さい方の親に-10度回転したdivを水平方向に中央に配置したいと思います。

回転したdivの中点が親ブロックの中央にくるようにします。 （私はいくつかのテストテキストで中点をマークしましたが、これはマークするだけです）。

これはどうすればよいですか？

https://jsfiddle.net/ytL9ybww/3/

body { 
 
     padding:0 0 0 0; 
 
     margin: 0 0 0 0; 
 
     padding-left:300px; 
 
     overflow:hidden; 
 
    } 
 
    
 
    nav { 
 
     height:100vh; 
 
     width:300px; 
 
     position:fixed; 
 
     top:0; 
 
     left:0; 
 
     background-color:black; 
 
    } 
 
    
 
    .block { 
 
     width:100%; 
 
     position:relative; 
 
     overflow:hidden; 
 
    } 
 
    
 
    .rotated-block { 
 
     position:relative; 
 
     z-index:10; 
 
     top:300px; 
 
     left:0; 
 
     text-align:center; 
 
     width: 5000px; 
 
     height:900px; 
 
     background-color:green; 
 
     transform:rotate(-10deg); 
 
    }

<div class="block"> 
 
    <nav> 
 

 
    </nav> 
 
    <div class="rotated-block"> 
 
    test 
 
    </div> 
 
</div>

Answer 1

まず中央ブロック（絶対位置及び変換）は、それを回転させます。

.parent { 
 
    height: 80vh; 
 
    width: 80vw; 
 
    margin: 1em auto; 
 
    position: relative; 
 
    border: 1px solid grey; 
 
} 
 

 
.child { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%) rotate(-10deg); 
 
    background: red; 
 
    width: 110%; 
 
    height: 50px; 
 
} 
 

 
.center { 
 
    position: absolute; 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 50%; 
 
    background: green; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
    <div class="center"></div> 
 
</div>