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