M-009 Animation simple

How to create a icon hover spin アイコンホバー回転の作り方

Icon rotates on hover. Hover.css-style pattern. ホバー時にアイコンが回転するエフェクト。Hover.css 系のパターン。

icon hover rotate Hover.css

ライブデモ Live Demo

0.5s

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Icon rotates on hover. Hover.css-style pattern.

ホバー時にアイコンが回転するエフェクト。Hover.css 系のパターン。

どこで使うかWhere to use

hero section, micro interaction, visual feedback, brand expression

アイコンボタン、ソーシャルリンク、ドロップダウントリガー、設定アイコン

特徴Key features

Icon rotates 360° smoothly on hover using CSS transform: rotate with a transition. Zero JavaScript. Compatible with any icon format (SVG, emoji, icon font). Works standalone or as part of a button/card.

CSS transform:rotateとtransitionで360°スムーズにアイコン回転。JavaScript不要。SVG・絵文字・アイコンフォントなど任意のアイコン形式に対応。スタンドアロンまたはボタン/カードの一部として使用可能。

調整可能パラメータ Adjustable Parameters

Parameter Default Description

実装コード Implementation Code 

/* react/M-009.css */
:root { --icon-spin-duration: 0.5s; }

.icon-spin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #5c6ac4;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.icon-spin-btn .icon {
  display: inline-block;
  transition: transform var(--icon-spin-duration) ease;
}

.icon-spin-btn:hover .icon { transform: rotate(180deg); }
import "./M-009.css";

export default function IconSpinButton({ icon = "↻", children }) {
  return (
    <button type="button" className="icon-spin-btn">
      <span className="icon" aria-hidden="true">{icon}</span>
      {children}
    </button>
  );
}
:root { --icon-spin-duration: 0.5s; }

.icon-spin-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #5c6ac4;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.icon-spin-btn .icon {
  display: inline-block;
  transition: transform var(--icon-spin-duration) ease;
}

.icon-spin-btn:hover .icon { transform: rotate(180deg); }

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

The icon element gets transform: rotate(0deg) in its default state and rotate(360deg) on :hover, connected by a CSS transition. display: inline-block or flex on the container is required for transform to apply correctly to inline elements.

アイコン要素はデフォルト状態でtransform:rotate(0deg)、:hoverでrotate(360deg)を持ち、CSSトランジションで接続されます。インライン要素にtransformが正しく適用されるよう、コンテナにdisplay:inline-blockまたはflexが必要です。

カスタマイズ方法Customization

Change rotation to 180deg for a half-turn flip effect used in disclosure arrows. Add transform: scale(1.2) alongside rotate for a combined spin-and-grow. Adjust transition-timing-function to spring or cubic-bezier for personality.

回転を180degに変えて開示用矢印の半回転フリップエフェクトに。rotateと一緒にtransform:scale(1.2)を追加してスピン＋拡大の組み合わせに。transition-timing-functionをspringやcubic-bezierに変えて個性を出す。

注意点Caveats

Rapid full rotations can be disorienting for some users. Consider using 180° (flip) instead of 360° for direction-indicating icons like chevrons. Add prefers-reduced-motion support to disable the rotation.

素早い全回転は一部のユーザーに不快感を与えることがあります。方向を示すシェブロンなどのアイコンには360°ではなく180°（フリップ）の使用を検討してください。prefers-reduced-motionで回転を無効化するサポートを追加してください。

よくある質問 Frequently Asked Questions

How to customize the icon hover spin? Icon Hover Spinをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the icon hover spin in React? ReactでIcon Hover Spinを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of icon hover spin? Icon Hover Spinのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.