Question

我正在使用css3转换来旋转并显示网站的每个页面但我遇到了谷歌地图没有被背面隐藏隐藏的问题：隐藏;在Chrome浏览器中。
你可以在这里看到一个简化的例子：
http://jsfiddle.net/xCryV/
在ie10或firefox中查看时，此功能完全正常如果我使用谷歌地图iframe而不是api，它也适用于chrome，但是我需要使用maps api来控制maptype和导航选项，并在页面上显示多个地图。
非常感谢任何帮助感谢。

<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);

backface-visibility hidden不适用于Chrome浏览器中的google maps api

0 个答案: