CSS: 角度の指定方法

CSSでは角度は「実数値+単位」で指定します。 単位は「deg」、「grad」、「rad」、「turn」の4つです。

deg
度。度数法に基づく角度。360deg = 1回転。
(例: transform: rotate(10deg);)
grad
グラード。グラード法に基づく角度。100grad = 1直角、400grad = 1回転。
rad
ラジアン。ラジアン法に基づく角度。2π rad = 1回転。
degree から変換する場合は degree * π / 180
turn
回転。1turn = 1回転。

サンプルコード

div 要素を「-10deg」 回転させるサンプルコードです。


<div id="rotate">-10deg</div>

<style>
    #rotate {
        -moz-transform: rotate(-10deg);
        -webkit-transform: rotate(-10deg);
        -ms-transform: rotate(-10deg);
        transform: rotate(-10deg);
        border: 1px solid black;
        width: 60px;
    }
</style>

-10deg