Question

所以我试图扭曲一个静态的谷歌地图结果，所以看起来你正在向下看“它”。无论如何，我已经使用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，无论我添加了哪些其他扩展程序）。

Answer 1

如果您对.test元素应用相同的半径，并将边框放在那里（但您可能更喜欢实际img标记上的边框，以下作品;我无法解决此问题

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

将边框应用于CSS变换透视图像

1 个答案: