Question

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

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

好的，经过一段时间的实验，我已经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;
}

旋转谷歌地图容器但不转动地图本身

1 个答案:

jsFiddle