固定股利沒有定位在左正確使用時變換旋轉

Question

能否請您看看THIS DEMO，讓我知道爲什麼left:0px;不工作時，我使用-webkit-transform: rotate(-90deg);

感謝

#tab{ 
 
    position:fixed; 
 
    width:120px; 
 
    height:15px; 
 
    left:-0px; 
 
    background:green; 
 
    top:300px; 
 
    padding:15px; 
 
    text-align: center; 
 
    -webkit-transform: rotate(-90deg); 
 
}

<div id="tab">Draw</div>

Answer 1

您需要在轉換後重新定位。這可以通過變換原點來完成： Mozilla documentation on transform-origin 還檢查了這個職位，這也解釋瞭如何變換髮生： Sitepoint article, scroll to The transform-origin Property

#tab{ 
 
    position:fixed; 
 
    width:120px; 
 
    height:15px; 
 
    left:-0px; 
 
    background:green; 
 
    top:300px; 
 
    padding:15px; 
 
    text-align: center; 
 
    -webkit-transform: rotate(-90deg); 
 
    transform-origin: left top; /* this does the trick */ 
 
}

<div id="tab">Draw</div>