Smooth rotation with modern CSS 관련

CSS > Article(s)

---

Article(s)

---

Smooth rotation with modern CSS

Create a smooth rotation of any element using modern CSS

Use modern CSS to control the rotation of any element smoothly. Hover to rotate, click to accelerate, unhover to return to the initial position following the shortest path!

• Single element (no pseudo-element)
• No keyframes
• Powered by @property and math functions

CSS-only smooth rotation

@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg; 
}
@property --i {
  syntax: "<number>";
  inherits: false;
  initial-value: 0; 
}
@property --j {
  syntax: "<number>";
  inherits: false;
  initial-value: 1; 
}
.box {
  --t: 1turn; /* control the modulo (the smallest angle after which you get back to the same visual) */
  --d: .8s;   /* the transition when you unhover */

  rotate: calc(mod(var(--a),var(--t)/2)*var(--i) + clamp(var(--t)/-2*var(--i),(var(--t)/2 - mod(var(--a),var(--t)))*9999,0deg));
  transition: --i var(--d),--a 0s var(--d),--j var(--d);
}
.box:hover {
  --i: 1;
  --a: calc(15turn*var(--j));
  transition: --i 0s,--a 30s linear,--j .5s;
}
.box:active {
  --j: 2; /* control the speed on click [1 infinity[ */
}

See Hover to rotate, click to accelerate, unhover for a smooth stop! by t_afif on CodePen.

More CSS Tips

• Smoothly stop an infinite rotation Using modern CSS to stop an infinite rotation on hover. January 14, 2025
• Running animations without keyframes A new way to create animations without relying on keyframes. January 09, 2025
• A new way to center block elements using place-self A modern way to center block elements using place-self instead of auto margin and max-width. December 06, 2024
• Border-only breadcrumb shape using modern CSS A few lines of code to create a border-only breadcrumb shape that you can easily adjust. December 05, 2024

Smooth rotation with modern CSS

---

Create a smooth rotation of any element using modern CSS