0

回転した div の下にこれを重ねるよりも、Google マップでこれを行うためのより効率的なアプローチがあるかどうか疑問に思っていたので、ほとんどカットアウト効果が得られました。たとえば、Google マップ コンテナを回転させて、実際のマップを回転させずにそのままにしておくことができるはずです。

いろいろ調べているのですが、なかなか出てこない...

さて、しばらく実験した後、ここまで来ました（Googleマップをjsfiddleに表示できません）

コードは次のとおりです。

CSS:

#map{
height:200px;
width:200px;
/* FF Chrome Opera etc */
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
zoom:1;

/* IE */
}
#map > div > div > div > div > div{
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
zoom:1;
}

JS:

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 5,
  center: new google.maps.LatLng(-33.92, 151.25),
  disableDefaultUI: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

HTML:

<div id="map" style="width:200px; height:200px;"></div>

今では完全に機能するようになりました... 1 つの問題が残っています... IE7 と IE8 :/.. それらのローテーションに関するアドバイスはありますか?

どんな助けでも大歓迎です。

4

1 に答える 1

0

必要なものは次のとおりです。

#wrapper {
    position: relative;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 212px;  // Use pythagoras' theorem to get these from required height/width
    height: 212px; // Sqrt(212 x 212 x 2) = 300 approximately
    background: #333;
    overflow: hidden;
}
#map {
    position: absolute;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 300px;
    height: 300px;
    top: -45px; // line it back up (not sure why it isn't: rotation weird?)
    left: -45px;
    background: #fdd url(http://www.somersethouse.org.uk/images/mi/visit/map.jpg);
    background-size: cover;
}

jsフィドル

于 2013-03-17T15:54:08.713 に答える