---
title: "CSS-Tricks"
url: https://daily.dev/posts/css-tricks-gktqweqqg
source_url: https://css-tricks.com/almanac/functions/r/rotate
type: article
source: "CSS-Tricks"
published: 2026-05-13T14:33:08.202Z
updated: 2026-05-13T14:33:56.355Z
tags: ["webdev", "css"]
reading_time: 4
upvotes: 10
comments: 1
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS-Tricks

**[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 4 min read · 10 upvotes · 1 comments

## Summary

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.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://css-tricks.com/almanac/functions/r/rotate>

## Community discussion

Top comments from developers on daily.dev.

**@allinonetools** · 1 upvotes

> Really useful breakdown. rotate() looks simple at first, but transform-origin changes everything once you start building menus, loaders, or small UI interactions.

## Similar posts on daily.dev

- [CSS-Tricks](https://daily.dev/posts/css-tricks-ypusm3rih) · CSS-Tricks · 5 upvotes · 0 comments
- [CSS-Tricks](https://daily.dev/posts/css-tricks-lqzt6cw70) · CSS-Tricks · 6 upvotes · 0 comments
- [CSS-Tricks](https://daily.dev/posts/css-tricks-k7p0pcvjd) · CSS-Tricks · 51 upvotes · 3 comments

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css)

[View this post on daily.dev](https://daily.dev/posts/css-tricks-gktqweqqg)