Grow your CSS skills. Land your dream job.

Fake 3D(skew) Google maps

  • # March 15, 2013 at 6:25 am

    I have this idea to embed google maps on a site but i like to skew it. I have made a sketch what i think it should look like [see here](http://www.dropbox.com/s/pwkul7keuhh1urm/2013-03-15%2011.18.55.jpg “see here”)

    I am not sure if its possible, im not a developer just like to think about impossible stuff.

    Let me know

    # March 15, 2013 at 6:59 am

    Certainly you could skew the map…but it would skew **everything** including the marker.

    # March 15, 2013 at 7:35 am

    The icon wil be something outside google maps

    # March 15, 2013 at 7:54 am

    You can use css 3d transforms, [bad browser support](http://caniuse.com/#feat=transforms3d) but that’s not really a problem if you take ‘graceful degradation’ into account. I think that one runs on GPU so that’s an added plus I guess.

    # March 15, 2013 at 8:12 am

    >The icon will be something outside google maps

    Yeah…but how would you get it positioned (and maintain its position on map updates)?

    >I am not sure if its possible, im not a developer just like to think about impossible stuff.

    Not IMpossible…but if there was a demand…Google would do it..for free.

    Wait…they do…don’t they in G-Maps Mobile?

    In fact, can’t you do a flyover a route type things in G-Earth? It’s been a while.

    # March 15, 2013 at 8:21 am

    Apparently you’re right: http://www.google.com/mobile/maps/3d/

    Is this possible to do on desktop websites though?

    Google Earth needs a plugin -_-

    # March 15, 2013 at 8:24 am

    Right now i got this not really what i want but it is getting closer

    [http://cdpn.io/nzKdH](http://cdpn.io/nzKdH “http://cdpn.io/nzKdH”)

    # March 15, 2013 at 8:26 am

    You can’t use skew to get a trapezium shape afaik.

    Try this: `transform: perspective(400px) rotateX(45deg);` (with prefixes)

    If you find out how to target labels you can probably transform those back to normal.

    # March 15, 2013 at 8:27 am

    > Yeah…but how would you get it positioned (and maintain its position on map updates)?

    This will always be the middle of the map so thats easy

    # March 15, 2013 at 8:28 am

    > You can’t use skew to get a trapezium shape afaik.

    You can! http://jsfiddle.net/rudiedirkx/349×9/

    # March 15, 2013 at 8:31 am

    Here…not skew….transform: http://codepen.io/anon/pen/krdEz

    # March 15, 2013 at 8:32 am

    > You can! http://jsfiddle.net/rudiedirkx/349×9/

    That’s not skew, in fact that’s not even a real transform. You can see if you put some white text in there that it’s just an [illusion](http://jsfiddle.net/349×9/1854/).

    > Here…not skew….transform: http://codepen.io/anon/pen/krdEz

    You’re slow! :P

    # March 15, 2013 at 8:35 am

    >You’re slow! :P

    True…I was delayed by neatening up the code & making it look good for presentation. :)

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".