【2026年8月最新】CSSのtransform:rotate()の使い方完全ガイド｜回転アニメーションの作り方と非エンジニアの向き合い方

サイトの一部の要素を「くるっ」と回転させたい。ボタンにホバーしたときアイコンが回る演出をつけたい。そんなとき、CSSの世界にはtransform:rotate()というプロパティが用意されています。

検索するとコードの断片はたくさん出てきますが、「なぜ回転の中心がズレるのか」「アニメーションをつけるにはどうすればいいのか」「古いブラウザでも動くのか」まで踏み込んで解説している記事は意外と多くありません。この記事では、transform:rotate()の基本構文からアニメーション実装、初心者がつまずきやすい3つの落とし穴までを、コード例つきで整理します。

さらに後半では、視点を少し変えて「そもそもCSSを自分で書かずに済ませる方法」にも触れます。弊社（株式会社GENAI）はAI導入支援を専門にしている会社で、社内のホームページ修正・LP制作の多くをClaude Codeというツールに任せています。「CSSを覚える」か「AIに任せる」か、どちらが自社にとって合理的かを判断する材料も持ち帰っていただける記事です。

この記事を最後まで読むと、次のことが分かります。

01 CSS BASICS transform:rotate()とは何か 回転の基本構文と、rotateX/Y/Z・rotate3d()の違いを理解する

transform:rotate()は、CSSで要素を回転させるためのプロパティです。時計の針のように、指定した角度だけ要素をぐるっと回すイメージを持つと分かりやすいでしょう。基本的な書き方は次の通りです。

.box {
  transform: rotate(45deg);
}

これだけで、.boxクラスがついた要素が時計回りに45度回転します。角度の単位はdeg（度）を使うのが一般的で、正の値は時計回り、負の値（例: -45deg）は反時計回りに回転します。

1-1. rotateX / rotateY / rotateZ ── 立体的に回す3つの軸

先ほどのrotate()は正確にはrotateZ()の省略形で、画面の奥行き方向（Z軸）を軸にした「平面上の回転」です。CSSにはこの他に、X軸・Y軸を中心にした立体的な回転も用意されています。

プロパティ	回転する軸	見え方のイメージ
rotate() / rotateZ()	画面に垂直なZ軸	時計の針のように平面でくるっと回る
rotateX()	横方向のX軸	上下にペラっとめくれるように回る
rotateY()	縦方向のY軸	左右にペラっとめくれるように回る（本を開くイメージ）
rotate3d()	X・Y・Zを自由に指定	3方向を組み合わせた自由な回転

.card {
  transform: rotateY(180deg); /* 横方向にめくれるように回転 */
}

実務でよく見かけるのはrotateY()を使ったカード裏返しアニメーションです。ホバーすると名刺がひっくり返るような演出は、多くの場合このrotateY()と後述のtransitionを組み合わせて作られています。

1-2. transform-origin ── 回転の軸をずらす

デフォルトでは、要素は自分自身の中心を軸に回転します。しかし「左上を軸に回したい」「右下を軸に回したい」というケースもあります。そこで使うのがtransform-originです。

.box {
  transform: rotate(45deg);
  transform-origin: top left; /* 左上を軸に回転 */
}

1-3. 実務でよく見る使用例3パターン

理屈だけだとイメージしづらいので、実務でよく採用される代表的な使用例を3つ紹介します。いずれも小規模な実装ながら、サイトの印象を大きく左右する演出です。

演出パターン	使うプロパティ	よく使われる場所
アイコンがホバーでくるっと回る	rotate() + transition	ボタン、SNSアイコン、矢印アイコン
カードがひっくり返る	rotateY() + transition	料金プラン比較カード、名刺風の自己紹介
ローディング中にぐるぐる回る	rotate() + animation + @keyframes	フォーム送信後の待機画面

この3パターンさえ実装できれば、一般的な企業サイト・LPで求められる「回転演出」の大半はカバーできます。逆に言えば、この基本パターンを応用するだけで十分なケースがほとんどで、必要以上に高度な3D回転まで踏み込む場面は限定的です。

02 ANIMATION 回転にアニメーションをつける方法 transitionとanimation、2つの実装方法を使い分ける

rotate()だけでは、要素は一瞬でパッと回転した状態に切り替わってしまいます。「ゆっくり回る」「ぐるぐる回り続ける」といった動きのある演出にするには、transitionまたはanimationと組み合わせる必要があります。

2-1. transition ── ホバーなど「状態の変化」を滑らかにする

transitionは、CSSプロパティの値が変化するときに、その変化を滑らかに見せるための仕組みです。ホバー（マウスを乗せたとき）に回転させる、というよくある演出はtransitionで実装します。

.icon {
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}
.icon:hover {
  transform: rotate(90deg);
}

上記のコードは、.iconにマウスを乗せると0.3秒かけて90度回転する、という動きになります。easeの部分は「動きの緩急（イージング）」を指定する箇所です。

2-2. animation ── 「ぐるぐる回り続ける」など自律的な動き

一方、ホバーなどのきっかけがなくてもページを開いた瞬間から自動的に回り続ける演出（読み込み中のスピナーなど）を作りたい場合は、animationと@keyframesを使います。

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}

@keyframesで「開始（from）」と「終了（to）」の状態を定義し、animationプロパティ側で「どの@keyframesを、何秒かけて、何回繰り返すか」を指定します。上記の例ではinfiniteを指定しているため、無限に回転し続けるローディングスピナーになります。

比較項目	transition	animation
発動のきっかけ	ホバーやクラス切り替えなど「状態の変化」が必要	ページ読み込み時など自動的に開始できる
繰り返し	基本的に1回きり（状態が戻れば逆再生）	infiniteで無限ループが可能
実装の手軽さ	◎ 2〜3行で完結	△ @keyframesの定義が別途必要
向いている用途	ホバーアニメーション、開閉アニメーション	ローディングスピナー、常時稼働の装飾演出

03 COMMON PITFALLS 実装でつまずく3つの落とし穴 初心者が高確率でハマるポイントを先回りして解説

transform:rotate()は書き方自体はシンプルですが、実務では「思った通りに動かない」というトラブルが頻発します。ここでは代表的な3つの落とし穴を紹介します。

3-1. 落とし穴①：回転しても「元の位置」の場所は空いたまま

transform:rotate()で要素を回転させても、レイアウト上は元の位置にそのまま存在し続けます。見た目は回転していても、他の要素から見ると「その場所を占有している」ことに変わりはないため、周囲の要素が回転前の見た目に合わせて配置されてしまいます。

3-2. 落とし穴②：display:inline;の要素には効かない

display: inline;（テキストの一部のように扱われる表示形式）が指定された要素には、transform:rotate()を含む多くのtransformプロパティが効きません。これはCSS初心者が最もハマりやすい落とし穴の一つです。

/* NG: inlineのままだと回転しない */
span { transform: rotate(45deg); }

/* OK: inline-blockに変更する */
span {
  display: inline-block;
  transform: rotate(45deg);
}

3-3. 落とし穴③：古いブラウザ対応（ベンダープレフィックス）

現在主流のブラウザ（Chrome、Safari、Edge、Firefoxの最新版）では、transformプロパティに特別な対応は不要です。ただし、古いバージョンのブラウザや一部のモバイルブラウザでは、ベンダープレフィックスを付けないと反映されないケースがあります。

.box {
  -webkit-transform: rotate(45deg); /* 古いSafari/Chrome向け */
  transform: rotate(45deg);         /* 標準記法 */
}

04 FOR NON-ENGINEERS 【独自】非エンジニアがCSS修正で消耗しない方法 「覚える」か「任せる」か、現実的な選択肢を整理する

ここまでtransform:rotate()の基本を解説してきましたが、正直なところ「自社サイトのボタンを少し回転させたいだけなのに、ここまで理解する必要があるのか」と感じた経営者・担当者の方も多いのではないでしょうか。

弊社（株式会社GENAI）はAI導入支援を専門にしており、日々さまざまな企業のホームページ・LP（ランディングページ）の細かな修正依頼を目にしています。その中で強く感じるのは、「CSSを覚える」ことと「CSSの成果物を手に入れる」ことは、実は別の話だという点です。

4-1. 旧来のCSS修正フロー：依頼から反映まで数日かかる

多くの中小企業では、ホームページのちょっとした修正（ボタンのアニメーション追加、色の変更など）でも、以下のような重いフローを踏んでいるのが実情です。

「ボタンを回転させたいだけ」のような小さな修正のために、この重いフローを毎回回すのは明らかに非効率です。かといって、経営者や担当者がゼロからCSSを勉強する時間的余裕もないのが現実でしょう。

4-2. Claude Codeに任せるフロー：指示から数分で反映

弊社が実際に採用しているのは、Claude CodeというAIエージェントツールに、コーディング作業そのものを任せる方法です。「このボタンにホバーしたら回転するアニメーションをつけて」と日本語で指示するだけで、AIがCSSコードを書き、ファイルを編集し、動作確認までを自律的に行います。

上記のような指示は、いずれも数分〜十数分で実装が完了します。CSSの構文を1文字も知らなくても、「何をしたいか」を言語化できれば成果物が手に入る、というのがAIコーディングエージェントの最大の価値です。

4-3. 「覚える」と「任せる」、結局どちらを選ぶべきか

ここまで読んで、「自分でCSSを覚えるべきか、それともAIに任せるべきか」を迷っている方に向けて、弊社なりの判断基準を整理します。答えは「頻度」と「複雑さ」の2軸で決まります。

状況	推奨	理由
月に1〜2回、簡単な色や文言の修正がある程度	AIに都度任せる	学習コストの方が高くつく。指示するだけで十分
週に何度もサイトを触る、事業のコアがWeb制作	基本文法だけでも学ぶ価値あり	AIへの指示の解像度が上がり、レビュー精度も上がる
社内にエンジニアがいない小規模事業者	AIに全面的に任せる	採用・外注コストと比べて圧倒的に低コスト
大規模なシステム開発・複雑な要件がある	専門エンジニア + AI補助	AI単体では設計判断が必要な領域まではカバーしきれない

多くの中小企業・個人事業主にとっては、上から2つ目までのケースに当てはまることがほとんどでしょう。「頻度が低く、内容もシンプル」な修正であれば、CSSを体系的に学ぶ時間そのものが機会損失になります。その時間を本業に充てて、実装はAIに任せる方が合理的な判断です。

05 GENAI CASE STUDY 【独自】GENAI社内でのAIコーディング実運用データ Max 20xプラン契約会社が、コーディング作業にどれだけ時間を使っているか

ここでは、弊社（株式会社GENAI）が実際にどの程度AIコーディングに業務を委ねているかを、数値ベースで紹介します。

項目	内容
契約プラン	Claude Max 20x（月$200 / 約30,000円）
利用開始	2025年後半〜
開発関連の用途	WordPress/HTML/LP制作、CSSアニメーション実装、スクリプト書き捨て
削減効果（開発領域・肌感）	都度数時間単位の削減

弊社では、Claude Max 20xプラン（月額約30,000円）を契約し、経営・営業・広告・開発・経理・秘書業務まで社内のあらゆる業務でClaude Codeを活用しています。開発領域に限定すると、ホームページやLPの細かな修正・CSSアニメーションの実装・使い捨てのスクリプト作成などを、都度Claude Codeに任せる運用です。

業務領域	主な用途	概算削減時間
営業	提案書・見積・顧客別資料の自動生成	週20時間 → 週2時間
広告運用	週次レポート・CPA分析・配信内容調整	週10時間 → 週1時間
ブログ記事	SEO記事執筆・リライト・内部リンク最適化	1本8時間 → 1本1時間
開発	WordPress/HTML/LP制作、CSSアニメーション実装	都度数時間の削減
経理	請求書チェック・経費仕訳・Freee連携	月40時間 → 月5時間

あくまで肌感ベースの概算ですが、開発領域だけを見ても「制作会社に見積を取って数日待つ」という時間を、その場で数分〜数十分に圧縮できている実感があります。もちろん複雑な機能開発は別ですが、「ボタンを回転させたい」「色を変えたい」レベルの修正であれば、この記事で紹介したフローで十分に対応可能です。

06 CONCLUSION まとめ ── 「知る」より「動かせる」を優先する CSSを覚えるか、AIに任せるか。判断基準を整理する

この記事では、CSSのtransform:rotate()の基本構文から、rotateX/Y/Z・rotate3d()による立体回転、transitionとanimationによるアニメーション実装、初心者がつまずきやすい3つの落とし穴までを解説しました。最後にポイントを振り返ります。

CSSの知識は、深く学べば学ぶほど自由度が上がります。ただし、経営者や非エンジニアの担当者にとって本当に大事なのは「CSSを暗記すること」ではなく「やりたい見た目を、必要なタイミングで実現できること」ではないでしょうか。

自分で書くにせよAIに任せるにせよ、この記事で紹介した基本用語（transform、transition、animation、transform-origin）を押さえておけば、制作会社やAIに指示を出すときの解像度が格段に上がります。まずは自社サイトの気になる箇所を1つだけ選んで、試しに動かしてみることをおすすめします。

「CSSを覚えるべきか、AIに任せるべきか」という問いに唯一の正解はありません。ただ、少なくとも「知らないから何もできない」という状態から抜け出す手段は、もはや学習だけではないということは、この記事を通じて伝わったのではないかと思います。基礎知識を押さえつつ、実装は状況に応じてAIも活用する。それが2026年時点での現実的な向き合い方です。

CSS修正のたびに外注する時代を、AI鬼管理が終わらせます

「ボタンを回転させたい」レベルの小さな修正から、業務全体の自動化まで。
弊社の実運用ノウハウをベースに、貴社に合わせた導入設計をご提案します。

よくある質問

Q. transform:rotate()とrotateZ()は何が違うのですか？

A. 実質的に同じです。rotate()はrotateZ()（画面奥行き方向のZ軸を中心にした回転）の省略記法として扱われます。平面上でくるっと回すだけなら、どちらを使っても同じ結果になります。

Q. 回転させると要素が消えたり見切れたりするのはなぜですか？

A. 親要素に overflow: hidden; が指定されていると、回転してはみ出した部分が見切れて表示されます。回転後の見た目も含めて表示させたい場合は、親要素のoverflow設定を確認してください。

Q. transitionとanimation、両方同時に使うことはできますか？

A. 可能です。例えば「ホバー時は素早く反応（transition）、通常時は常にゆっくり回転し続ける（animation）」のように組み合わせるケースもあります。ただし同じプロパティに対して両方を指定すると意図しない挙動になることがあるため、対象プロパティを分けるのが安全です。

Q. CSSの知識が全くない状態でも、AIにコーディングを任せられますか？

A. 任せられます。重要なのは構文の知識ではなく「何を実現したいか」を言語化することです。「このボタンをホバーで少し回転させたい」のような日本語の指示だけで、Claude CodeのようなAIエージェントがコードを実装してくれます。

Q. スマートフォン表示でもtransform:rotate()は同じように動きますか？

A. 基本的には同じように動作しますが、画面サイズによってレイアウトが崩れやすい点には注意が必要です。メディアクエリ（画面幅ごとの条件分岐）と組み合わせて、スマホ表示では回転角度を小さくする、といった調整をするケースもあります。

Q. AIにサイト修正を任せる場合、セキュリティ面は大丈夫ですか？

A. 実装後に人間が動作確認する運用を徹底すれば、通常のホームページ修正と同様のリスク管理で問題ありません。特に決済・フォームなど事業に直結する重要な箇所は、公開前に必ず目視確認するフローを組み込むことをおすすめします。

Q. rotate()とscale()やtranslate()は同時に指定できますか？

A. できます。transformプロパティは半角スペース区切りで複数の変形を同時に指定可能です。例えば「transform: rotate(20deg) scale(1.1);」のように書けば、回転と拡大を同時に適用できます。ただし記述する順番によって見た目の結果が変わる場合があるため、意図した動きにならないときは順番を入れ替えて確認してみてください。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。