AI向け説明AI Description

M-009 はアイコン要素に transition で transform: rotate を指定し、:hover で 180deg 等に変化させます。Hover.css の hvr-icon-spin 系パターン。

M-009 applies transition on the icon's transform: rotate and changes it on :hover (e.g. 180deg). Hover.css-style hvr-icon-spin pattern.

調整可能パラメータParameters

• --icon-spin-duration: 回転の時間rotation duration
• rotate の角度: 360deg で1回転などe.g. 360deg for full spin

実装Implementation

HTML + CSS

<button class="icon-spin-btn">
  <span class="icon">↻</span> Refresh
</button>

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

React (JSX + CSS)

// react/M-009.jsx
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>
  );
}

/* 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); }