Home/ Questions/Q 7070525
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:34:37+00:00

So I’m trying to skew a static Google map result so it looks like

  • 0

So I’m trying to skew a static Google map result so it looks like you’re looking down “into it”. Anyway, i’ve got it working using CSS3 transforms:

<html><head>
<style>
.container {
    margin-left: 200px;
    -webkit-perspective: 600;    
       -moz-perspective: 600;
        -ms-perspective: 600;
         -o-perspective: 600;
            perspective:600;
    -webkit-perspective-origin: top;
       -moz-perspective-origin: top;
        -ms-perspective-origin: top;
         -o-perspective-origin: top;
            perspective-origin: top;                
    width: 400px;
}

.test {
    width: 100%;
    -webkit-transform: rotateX(89deg);
       -moz-transform: rotateX(80deg);
        -ms-transform: rotateX(80deg);
         -o-transform: rotateX(80deg);
            transform: rotateX(80deg);
}

img.map {
    border-radius: 200px;
}
</style></head><body>
<div class=container>
<div class=test><img class="map" src="https://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=18&sensor=false&scale=1&format=png&maptype=roadmap&size=400x400&markers=icon:http://tron.robotholocaust.com/pin2.png%7Cshadow:false%7C40.714728,-73.998672"></div>

Which gives you:

scaled image

I’d like to put a border around that though.

If I add

img.map{
    border: 5px solid;
    border-radius: 200px;    
}

I instead get:

bad borders!

How can I get that border to apply properly? Do I need to do some other CSS trick? (And yes, this only works in Chrome & Safari regardless of the other extensions I’ve added sadly).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The following works, if you apply the same radius to the .test element, and put the border there (but you may prefer the border on the actual img tag; I couldn’t solve that.

    .test {
    border: 3px solid black;
    border-radius: 200px;
}
    • 0