CSS旋轉從頁面的一側移動DIV

Question

我正在嘗試創建一個側面標記​​，在此處以基本窗體的形式顯示。 http://www.firstforturf.co.uk/quotation.php

我試圖做盡可能多的使用CSS，而不是隻是把圖像，但我遇到了一個問題。

旋轉側面DIV後，它將從頁面的一側移開。我試圖將邊距設置爲0，但它似乎並沒有工作。

如果有幫助，這裏是sidetag的CSS規則。

color: #FFF; 
    height: 50px; 
    width: 200px; 
    position: fixed; 
    background-color: rgb(0,102,204); 
    font-size: 32px; 
    line-height: 50px; 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    text-align: center; 
    top: 50%; 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    writing-mode: tb-rl; 

偉大的，如果任何人都可以提供幫助。乾杯。

Answer 1

使用transform-origin：

-moz-transform-origin: 20px; 
-ms-transform-origin: 20px; 
-o-transform-origin: 20px; 
-webkit-transform-origin: 20px; 
transform-origin: 20px; 

Answer 2

看看-webkit-transform-origin。由於您的元素已修復，因此您可能需要相應地修改變換原點。

Answer 3

您可以使用transform-orign：

transform: rotate(45deg); 
transform-origin:20% 40%; 
-ms-transform: rotate(45deg); /* IE 9 */ 
-ms-transform-origin:20% 40%; /* IE 9 */ 
-webkit-transform: rotate(45deg); /* Safari and Chrome */ 
-webkit-transform-origin:20% 40%; /* Safari and Chrome */ 
-moz-transform: rotate(45deg); /* Firefox */ 
-moz-transform-origin:20% 40%; /* Firefox */ 
-o-transform: rotate(45deg); /* Opera */ 
-o-transform-origin:20% 40%; /* Opera */ 

try this link