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

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