將邊框應用於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轉換透視圖像

回答

相關問題