3

我正在使用 css3 转换来旋转和显示网站的每个页面。
但是我遇到了谷歌地图没有被背面可见性隐藏的问题：隐藏；在 chrome 浏览器中。
您可以在此处看到一个简化的示例：http:
//jsfiddle.net/xCryV/
在 ie10 或 firefox 中查看时，它工作得非常好。
如果我使用谷歌地图 iframe 而不是 api，它在 chrome 中也可以正常工作，但我需要使用地图 api 来控制地图类型和导航选项，并在页面上显示多个地图。
任何帮助深表感谢。
谢谢。

<div id="card">
<div>
    <div id="map_canvas1"></div>
    <!--<iframe width="400" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ca/maps?q=1600+Amphitheatre+Parkway+Mountain+View,+CA+94043&amp;aq=f&amp;ie=UTF8&amp;hl=en&amp;hq=&amp;hnear=1600+Amphitheatre+Pkwy,+Mountain+View,+California+94043,+United+States&amp;t=m&amp;z=14&amp;ll=37.421401,-122.08537&amp;output=embed"></iframe>-->
</div>


setTimeout(function initialize() {
    var settings1 = {
        zoom: 15,
        center: new google.maps.LatLng(37.421401,-122.08537),
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map1 = new google.maps.Map(document.getElementById("map_canvas1"), settings1);
    var companyPos1 = new google.maps.LatLng(37.421401,-122.08537);
    var companyMarker1 = new google.maps.Marker({
        position: companyPos1,
        map: map1,
        title:"Google Inc."
    });
}, 100);

-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: perspective(1000px) rotateX(-180deg);
-moz-transform: perspective(1000px) rotateX(-180deg);
-o-transform: perspective(1000px) rotateX(-180deg);
transform: perspective(1000px) rotateX(-180deg);
4

0 回答 0