【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

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト