Rotation turns an element around its transform origin. In CSS, transform: rotate(45deg) turns an element 45 degrees clockwise; negative angles turn it counterclockwise. Angles may be expressed in degrees or radians, with 180 degrees equal to π radians. section 1.4.7
Interactive rotation begins with a point and a target. Find the element’s center, subtract it from the mouse position, and use Math.atan2(deltaY, deltaX) to obtain the direction in radians. Convert that result to degrees before applying it to a CSS rotate() transform. atan2 preserves the signs of both coordinates, so it selects the correct quadrant. section 13.2.2 section 9.4
Common frontend uses include:
- Point an arrow, pointer, camera, or character toward the cursor or another target. section 9.4
- Rotate a dial or knob by mapping a mouse position to an angle, then constrain that angle to a usable range. section 13.2.2
- Create hover tilt effects by scaling the pointer’s distance from an element’s center into rotation intensity. section 10.2.3
A cursor-following element
For an element centered at (x1, y1) and a cursor at (x2, y2), calculate deltaX = x2 - x1 and deltaY = y2 - y1. Convert Math.atan2(deltaY, deltaX) from radians to degrees, then set element.style.transform = `rotate(${angleDeg}deg)`. When continuously updating rotation, normalize angle changes across the ±180-degree boundary to avoid sudden jumps. section 9.4
Listing 13.5a Implementing a custom rotary control (part 1)
HTML:
<div id="knob-container">
<div id="knob">
<div id="knob-indicator"></div>
</div>
<div>Volume: <span id="knob-value">50</span></div>
</div>
CSS (partial):
#knob-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-top: 2rem;
max-width: 300px;
}
#knob {
width: 100px;
height: 100px;
border: 4px solid #888;
border-radius: 50%;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
transition: box-shadow 0.2s;
}
#knob-indicator {
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 50px;
background: #3476e6;
border-radius: 4px;
transform: translate(-50%, -90%);
box-shadow: 0 1px 4px rgba(52, 118, 230, 0.18);
}
Shows the HTML, CSS, and JavaScript structure of a custom rotary control. section 13.2.2
