CSSの変換divはすべて回転したままです

Question

次のようにdivのセットを回転しています。

map-grid: 
-webkit-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em); 
    -moz-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em); 
    -ms-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em); 
    -o-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em); 
    transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em); 

これはアイソメトリックグリッドの種類を作成するためのものです。それは正常に動作しますが、通常の視点で保持したい各部門のコンテンツは試してみました。

map-grid-cell-content: 
-webkit-transform: none; 
     -moz-transform: none; 
     -ms-transform: none; 
     -o-transform: none; 
      transform: none; 

マークアップは、この

<div class='map-container'> 
    <div class='map-grid'> 

    <div class="map-grid-cell-content"> 
     << this is where i need the content to be normal >> 
    </div> 

    </div> 
</div> 

のようなものですが、すべてが、回転させ、任意のアイデアをしてくださいまま？

は

Answer 1

.map-grid { 
 
    -webkit-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em); 
 
    -moz-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em); 
 
    -ms-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em); 
 
    -o-transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em); 
 
    transform:skewX(-45deg) rotate(15deg) scaleX(1.785) scaleY(.8) translateX(7em) translateY(-4.5em); 
 
    margin-top: 300px; 
 
    } 
 
.map-grid-cell-content { 
 
    transform: skewX(45deg) rotate(0deg); 
 
}

<div class='map-container'> 
 
    <div class='map-grid'> 
 

 
    <div class="map-grid-cell-content"> 
 
     dwdwaddawwa 
 
    </div> 
 

 
    </div> 
 
</div>

これは何が必要でしょうか？