CSS: Google maps tilt view?

Question

Я пытаюсь использовать CSS для изменения угла контейнера карт google, так что он находится в режиме просмотра наклона.

Проблема, что у меня есть то, что вид карты является наклоном, но верхняя часть страницы пуста, даже если ширина элемента контейнера карты установлена ​​равной 100%.

Это рабочий FIDDLE

И это код CSS:

#map-canvas { 
    height: 100%; 
    width: 100%; 
    position:absolute; 
    -webkit-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
    -moz-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
    -o-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
    transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
} 

Может кто-то пожалуйста, дайте мне знать, если есть способ, чтобы обойти эту проблему, так что карта с учетом наклона но охватывает всю страницу?

Примечание. Карты Google поддерживают просмотр наклона только для изображений HYBRID и Satellite и НЕ вид ROADMAP, который я использую.

Заранее спасибо.

Answer 1

Вы можете работать на измерении в рх, а не в% видят и положение карты http://jsfiddle.net/apqpw08u/

например:

#map-canvas { 
height: 1000px; 
width: 2000px; 
position:absolute; 
left: -500px; 
top: -500px; 
-webkit-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
-moz-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
-o-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
} 

или в% http://jsfiddle.net/apqpw08u/3/

#map-canvas { 
height: 200%; 
width: 200%; 
position:absolute; 
left: -50%; 
top: -50%; 
-webkit-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
-moz-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
-o-transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
transform: perspective(1000px) rotate3d(40, 1, 0, 40deg)!important; 
}