トランスフォーム：rotate（-90deg）は不要なスペースを作成します

Question

私はtransform CSS3のプロパティを使用しています。 divを回転させた後、divの左側にスペースを作成します。相続人は私のJSfiddle

はSOいくつかのコードをしたい：

<div> 
    Maglevboard 
</div> 

<style> 
    div { 
    font-size:5em; 
    transform:rotate(-90deg); 
    display:inline-block; 
    } 
</style> 

Answer 1

あなたが翻訳を追加し、適切なtransform-originを使用してそれを修正することができます。それは要素の中心から回転 - 私はあなたがどのように `rotate`動作するためです

div { 
 
    font-size: 5em; 
 
    transform-origin: 100% 0; 
 
    transform: translateX(-100%) rotate(-90deg); 
 
    display: inline-block; 
 
}

<div>Maglevboard</div>