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

Question

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

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

好吧，经过一段时间的试验，我得到了 this远(无法在 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