CSS變換：我使用的CSS變換屬性旋轉網頁的標誌旋轉屬性，不必要的邊界

。標誌本身是由幾個內部的相對和絕對位置的divs組成。我有一個外部的div保持整個事情與wholeLogo的ID，我把這個樣式表將它旋轉：CSS變換：我使用的CSS變換屬性旋轉網頁的標誌旋轉屬性，不必要的邊界

#wholeLogo { 
    border: none; 
    width: 600px; 
    margin: 0 auto; 
    margin-top: 15px; 
    transform: rotate(-7deg); 
    -webkit-transform: rotate(-7deg); 
    -o-transform: rotate(-7deg); 
    -moz-transform: rotate(-7deg); 
}

該標識已被正確地旋轉，但我讓周圍的每一個奇怪的虛線框整個標誌div內的div。有誰知道爲什麼會發生這種情況，以及如何使其停止？

下面是小提琴要求：

http://jsfiddle.net/CbsUT/1/

如果你想知道爲什麼有每一塊標誌的兩個副本，這是因爲我想要的色彩漸變和文字陰影。但是這兩件事似乎並沒有讓對方好起來，所以我用另一種與另一種做了一個副本，並將它們重疊在一起。

最壞的情況是我unrotate它，做一個屏幕捕捉，油漆什麼的旋轉它，並把它回爲一個圖片，但我想如果可能避免這種情況。

來源

2012-09-06 gmath

我們可能會看到一個小提琴？如果你不旋轉它會發生什麼？ – Passerby

也許這是內部的div的像素不太排隊旋轉時 - 是「邊界」背後的div的顏色？ – zenkaty

@Passerby。小提琴被添加。不旋轉時沒有邊框。 – gmath

試試這個

HTML： -

<div id="wholeLogo"> 
    <h1 data-title="Logo"> <a href="#">Logo</a> </h1> 
</div>

CSS： -

#wholeLogo { 
    width: 600px; 
    margin: 0 auto; 
    margin-top: 35px; 
    transform: rotate(7deg); 
    -webkit-transform: rotate(7deg); 
    -o-transform: rotate(7deg); 
    -moz-transform: rotate(7deg); 
} 

h1 { 
    position: relative; 
    font-style: italic; 
    font-family: Verdana; 
    font-weight:normal; 
    text-transform:uppercase; 
    font-size:100px; 
    text-shadow: 2px 3px 1px #292929; 
} 

h1 a { 
    text-decoration: none; 
    position: absolute; 
    color: #0032ff; 
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(20%, rgba(0,0,0,0)), to(rgba(0,0,0,1))); 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    transition: all .3s; 
} 

h1 a:hover { 
    color: #0032ff; 
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.3)), to(rgba(0,0,0,1))); 
} 

h1:after { 
    color: #dc0000; 
    content : attr(data-title); 
}

來源

2012-09-06 06:39:36

CSS變換：我使用的CSS變換屬性旋轉網頁的標誌旋轉屬性，不必要的邊界

回答

相關問題