是否可以旋轉元素，但不能使用css3來旋轉元素？

我有以下元件是否可以旋轉元素，但不能使用css3來旋轉元素？

<a href="#" class="some_class">Test Text Here</a>

並且該元件具有淡藍色背景和一些填充。今天我遇到了一個小挑戰：我知道我們可以旋轉元素，但是其內容也是旋轉的。我是想實現看起來像這樣：

enter image description here

所以元件本身稍微旋轉，但其內容留在原地。用CSS3可以實現嗎？我嘗試了幾個嵌套元素，但是通過旋轉它們的父元素也旋轉了所有子元素。這也可以用單個元素來完成，就像上面所說的例子那樣？

來源

2013-05-20 Ilja

不嵌套元素，只是疊加在藍色的div文字 – Sebas

@Sebas哇，我第一次聽到的疊加，讓我做了一些研究，這個 – Ilja

另一種選擇是有文本的嵌套子項，將旋轉應用於父項，然後將反向旋轉應用於子項。（儘管我更喜歡Sebas的方法，根本就沒有嵌套。） – dlev

當然，如果你在包裝的跨度文本，然後跨度設定爲position: absolute，並transform其等量相反的方向，以「默認」了。

我建議對超級強加在你的鏈接文字對你提出的上述情況，只要你想文本是INSIDE的搜索引擎優化的目的錨標記。

所以...我旋轉了<a> 10度的順時針旋轉了10度的逆時針。

***** ALTERNATIVELY ** - 您也可以將量程設置爲顯示：block;並放棄絕對定位。這取決於你的用例。絕對定位它，在這種情況下，將允許您移動文本多一點控制。

http://jsfiddle.net/B95xa/

a { 
    color: #fff; 
    display: block; 
    width: 100px; 
    height: 30px; 
    background: blue; 
    border-radius: 5px; 
    -moz-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
    -webkit-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
    -o-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
    -ms-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
    transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
} 

span { 
    position: absolute; 
    -moz-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
    -webkit-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
    -o-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
    -ms-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
    transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
}

來源

2013-05-20 19:03:45 Michael

非常有用！謝謝！ –

你有2個選擇，我知道的：

讓他們獨立的元素，只是旋轉背景圖像/格。如果您需要動畫旋轉，則此方法可以工作。
如果您正在使用圖像，請將背景圖像保存爲預偏斜。

來源

2013-05-20 19:03:30

是否可以旋轉元素，但不能使用css3來旋轉元素？

回答

相關問題