A reference guide for the CSS rotate() function, which spins elements clockwise or counterclockwise in a 2D plane as part of the transform property. Covers syntax, angle units (deg, grad, rad, turn), transform-origin for changing the rotation axis, and practical examples including accordion toggles, hamburger menus, loading spinners, and rotated text labels.
Table of contents
SyntaxArgumentsBasic usageExample: Hamburger menuExample: Loading iconsExample: Rotating textDemoSpecificationBrowser supportRelated tricks!Can you rotate the cursor in CSS?Creating a Clock with the New CSS sin() and cos() Trigonometry FunctionsHow They Fit Together: Transform, Translate, Rotate, Scale, and OffsetHow to Animate the Details ElementMaking a Real-Time Clock With a Conic Gradient FaceRecreating Gmail’s Google Gemini AnimationRecreating the Apple Watch Breathe App AnimationRotated Table Column Headers… Now With Fewer Magic Numbers!RelatedrotateX()rotateY()rotateZ()transformtransform-origin12.8K Impressions1 Comment