css - 旋转谷歌地图容器而不是地图本身

Question

我只是想知道是否有一种更有效的方法来使用 Google 地图执行此操作，而不是将其分层放置在旋转的 div 下，这样它几乎是一种剪切效果。例如，您当然应该能够旋转谷歌地图容器并保持实际地图不旋转..

我一直在研究，但没有找到太多...

好的，经过一段时间的试验，我已经走到了这一步（无法让谷歌地图显示在 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 :/.. 关于轮换的任何建议？

非常感谢任何帮助。

Answer 1

这是您需要的：

#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;
}

jsFiddle