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

因此，我试图扭曲静态Google地图的结果，因此看起来您正在往下看。无论如何，我已经得到了它的工作使用CSS3转换：将边框应用于CSS转换透视图像

<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，无论我添加的其他扩展是否可悲）。

来源

2012-01-17 tkone

你有没有尝试在'div'中包装'img'？ – c69 2012-01-17 19:31:10

下工作，如果采用同样的半径与.test元素，并把边界存在（但你可能更实际img标签的边界。我不解决

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

来源

2012-01-17 19:31:17

d'oh。我以为我尝试过了，我一定没有做到这一点，因为狗屎现在工作。谢谢兄弟！ – tkone 2012-01-17 19:43:01

没有理由指定'border-radius'以像素为单位，如果你只是想要一个圆圈;）'50％'的工作原理相同且更好。 http://jsfiddle.net/QpFy6/ – c69 2012-01-17 20:04:33

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

回答

相关问题