Rotation turns an element around an axis by a specified angle. In CSS, rotate() applies the change without altering the element’s place in document flow, so neighboring content can remain fixed or overlap. section 16.1 section 16.4
Use rotation by choosing an angle and then checking how the transformed element interacts with its surroundings.
- Use positive angles for clockwise rotation and negative angles for rotation in the opposite direction, such as rotate(-30deg). section 16.1
- Express angles with directions such as to right, degrees such as 90deg, radians, turns, or gradians; 0deg points up and 90deg points right. section 13.1
- Treat rotate() as rotation around the z-axis; use rotateX() or rotateY() for three-dimensional pitching or yawing. section 16.4
- Remember that rotation changes the rendered appearance but not normal document flow, which can produce overlap with other elements. section 16.1
Tilt a card
A card can be rotated with a single declaration: .card { transform: rotate(15deg); }. To move the already-rotated card horizontally, use transform: translate(50px, 0) rotate(15deg); transforms are applied from right to left, so the card rotates first and then translates. section 16.1 section 16.1.2
Listing 16.3 Applying multiple transforms
.card {
max-inline-size: 300px;
padding: 0.5em;
margin-inline: auto;
background-color: white;
transform: translate(50px, 0) rotate(15deg); #1
}
Inspect the combined translation and rotation declaration to see how transform order changes the element’s movement. section 16.1.2
