css - style - html title attribute




旋轉和翻譯 (3)

原因是因為您使用了兩次transform屬性。 由於具有級聯的CSS規則,如果它們具有相同的特異性,則最後一個聲明獲勝。 由於兩個轉換聲明都在同一個規則集中,因此就是這種情況。

這是做什麼的:

  1. 將文字旋轉90度。 好。
  2. 將50%翻譯50%。 好的,這與第一步相同,所以執行此步驟並忽略第1步。

請參閱http://jsfiddle.net/Lx76Y/並在調試器中打開它以查看第一個聲明被覆蓋

由於翻譯覆蓋了旋轉,你必須將它們組合在同一個聲明中: http://jsfiddle.net/Lx76Y/1/http://jsfiddle.net/Lx76Y/1/

要執行此操作,請使用以空格分隔的變換列表:

#rotatedtext {
    transform-origin: left;
    transform: translate(50%, 50%) rotate(90deg) ;
}

請記住,它們是在鏈中指定的,因此首先應用平移,然後再應用旋轉。

https://code.i-harness.com

我在旋轉和定位一行文字方面遇到了一些問題。 現在它只是有效的位置。 旋轉也可以,但只有我禁用定位。

CSS:

#rotatedtext {
    transform-origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

html只是純文本。


可能會遺漏的東西:在我的鏈接項目中,結果是空格分隔的列表最後還需要一個空格分隔的分號。

換句話說,這不起作用:

transform: translate(50%, 50%) rotate(90deg);

但這樣做:

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"

沒有必要這樣做,因為你可以根據需要使用值'vertical-lr'或'vertical-rl'的css'write-mode'。

.item {
  writing-mode: vertical-rl;
}





css-transforms