Применение границы к перспективному изображению с преобразованием CSS - PullRequest
Новая
       41

Применение границы к перспективному изображению с преобразованием CSS

2 голосов
/ 17 января 2012

Итак, я пытаюсь исказить результат статической карты Google, чтобы выглядело так, будто вы смотрите "в нее".Во всяком случае, у меня это работает с использованием CSS3 преобразований: 

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

Что дает вам:

scaled image

Я бы хотелхотя, чтобы поставить границу вокруг этого.

Если я добавлю 

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

, я получу вместо этого:

bad borders!

Как я могу получить этограницу правильно применять?Нужно ли делать какой-то другой трюк CSS?(И да, это работает только в Chrome & Safari независимо от других расширений, которые я добавил к сожалению).

1 Ответ

2 голосов
/ 17 января 2012

Следующее работает, если вы примените тот же радиус к элементу .test и поместите границу туда (но вы можете предпочесть границу фактическому тегу img; я не смог бы решить это. 

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