浮動一個固定的div並旋轉它

我想旋轉這個div，修正它並將它浮動到右邊像[jsbin.com/ujebik/1][1]但它並沒有完全浮動到RIGHT浮動一個固定的div並旋轉它

HTML：

<div class="logo"> 
    ROTATE THIS TEXT 
</div>

CSS：

.logo { 
position: fixed; 
top: 20px; 
right: 0; 
z-index: 100; 
width: 250px; 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
transform: rotate(-90deg); 
    font-size:20px; 
background-color:green 
}

UPDATE：

想這樣的：

enter image description here

，但有這樣的：

enter image description here

來源

2013-07-01 Asme Just

包括您的CSS和HTML到您的問題。 – bot

這是與jsbin相同的代碼，所以真的很難理解......我認爲如果你附上你所擁有的東西和你期望的東西，這會更好 –

@AlessandroMassa我剛剛更新了帖子。 –

嘗試添加變換產地：100％100％;使div圍繞其右下角而不是其中心旋轉（http://jsbin.com/iniweq/2/）

來源

2013-07-01 10:03:12

是的，我工作100％！ –

非常感謝。 –

你好，我試圖把div浮動到左邊（這次），但是我得到了同樣的問題：它沒有完全浮動到左邊。請你再幫我一次。 –

我猜你正在嘗試做的是對左側的元素？如果是這種情況，那麼你需要將你的CSS改變

.logo { 
    position: fixed; 
    top: 20px; 
    left: 0; 
    z-index: 100; 
    width: 250px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    font-size:20px; 
    background-color:green 
    }

這裏是一個小提琴：http://jsfiddle.net/Er3yL/

或者，如果你想說的是，你要「浮動」做到了極致RIGHT，那麼我猜測.logo的父元素沒有拉伸到窗口的100％。要麼你可以糾正或者，如果你想保持這種狀態，那麼你可以爲負值添加到右側，這樣

.logo { 
    position: fixed; 
    top: 20px; 
    right: -20px; 
    z-index: 100; 
    width: 250px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    font-size:20px; 
    background-color:green 
    }

來源

2013-07-01 09:31:16

對不起，我的意思是正確的。剛剛編輯了這篇文章。 –

@AsmeJust然後我的答案的第二塊適用。 :)希望它有幫助。 –

同樣的問題，它並沒有完全浮動到正確的位置。 –

浮動一個固定的div並旋轉它

回答

相關問題