CSS Tip

Smooth rotation with 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!

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 the Pen Hover to rotate, click to accelerate, unhover for a smooth stop! by Temani Afif (@t_afif) on CodePen.

More CSS Tips