CSS プロパティ rotation

CSS プロパティ rotation：要素の回転を制御し、ウェブページに動的な効果を

CSSの`rotation`プロパティを詳しく解説し、要素の回転、回転中心点の設定、様々な回転アニメーション効果の適用方法を理解し、ウェブデザインのレベルアップを目指しましょう。

CSS `rotation` プロパティとは？

`rotation` プロパティは、要素を2次元平面上で回転させるために使用されます。ただし、`rotation` プロパティ自体は現在では非推奨となっており、代わりに `transform` プロパティの `rotate()` 関数を使用することが推奨されています。

`transform: rotate()` を使用した要素の回転

`transform: rotate()` 関数は、要素を指定した角度だけ回転させます。構文は以下の通りです。

css transform: rotate(角度);

角度は、以下の単位で指定することができます。

  • `deg`：度（degree）
  • `rad`：ラジアン
  • `turn`：回転数

正の値は時計回りの回転、負の値は反時計回りの回転を表します。

コード例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS rotation のサンプル</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
    }

    .rotate-45deg {
      transform: rotate(45deg); /* 45度時計回りに回転 */
    }

    .rotate-1rad {
      transform: rotate(1rad); /* 1ラジアン時計回りに回転 */
    }

    .rotate-05turn {
      transform: rotate(0.5turn); /* 半回転（180度）時計回りに回転 */
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box rotate-45deg"></div>
  <div class="box rotate-1rad"></div>
  <div class="box rotate-05turn"></div>
</body>
</html>

回転中心点の制御：`transform-origin` プロパティ

`transform-origin` プロパティは、要素の回転の中心点を指定するために使用されます。デフォルトでは、要素の中心が回転の中心点となります。

`transform-origin` プロパティには、以下の値を指定することができます。

  • キーワード： `top`, `right`, `bottom`, `left`, `center`
  • パーセンテージ値：要素の幅と高さに対するパーセンテージ
  • 長さ値：ピクセル値やその他の単位

コード例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS transform-origin のサンプル</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
      transform: rotate(45deg); 
    }

    .origin-top-left {
      transform-origin: top left;
    }

    .origin-50-50 {
      transform-origin: 50% 50%;
    }

    .origin-10px-20px {
      transform-origin: 10px 20px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box origin-top-left"></div>
  <div class="box origin-50-50"></div>
  <div class="box origin-10px-20px"></div>
</body>
</html>

`rotation` アニメーション効果

`transition` プロパティや `animation` プロパティと組み合わせることで、滑らかな回転アニメーションを実現することができます。

コード例：

<!DOCTYPE html>
<html>
<head>
  <title>CSS rotation アニメーションのサンプル</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
      /* マウスホバー時のスムーズな回転 */
      transition: transform 0.3s ease; 
    }

    .box:hover {
      transform: rotate(360deg); 
    }

    .spinning-box {
      width: 100px;
      height: 100px;
      background-color: #00f;
      /* 無限回転アニメーション */
      animation: spin 2s linear infinite; 
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="spinning-box"></div>
</body>
</html>

ブラウザの互換性

`transform: rotate()` は、主要なブラウザで広くサポートされています。 詳細については、Can I use のウェブサイト (https://caniuse.com/?search=transform) を参照してください。

関連リソース

よくある質問

Q1: `transform: rotate()` と `rotation` プロパティの違いは何ですか？

A1: `rotation` プロパティは古い仕様で、現在は非推奨となっています。 `transform: rotate()` は、最新の仕様であり、より多くのブラウザでサポートされています。

Q2: 要素を3次元で回転させるにはどうすればよいですか？

A2: `transform` プロパティの `rotateX()`, `rotateY()`, `rotateZ()` 関数を使用することで、要素を3次元で回転させることができます。

Q3: アニメーション中に回転の中心点を変更することはできますか？

A3: はい、アニメーションのキーフレーム内で `transform-origin` プロパティの値を変更することで、アニメーション中に回転の中心点を変更することができます。