CSS Rotate: How to rotate image, text, and any element with CSS and animations

To rotate things with CSS, we can use the rotate property within the transform function.

With it, you can rotate images, texts, and any element.

How to use CSS Rotate

The rotate function in CSS allows you to rotate an element around its origin point. This is achieved using the transform property. The syntax is simple:

transform: rotate(angle);

• Angle: Specifies how much to rotate the element.
  • Positive values rotate clockwise
  • Negative values rotate counterclockwise
  • Units can be deg (degrees), rad (radians), grad (gradians), or turn (full rotations).

Example: Basic Rotation

transform: rotate(15deg);

This rotates the element 15 degrees clockwise.

To rotate counterclockwise, use negative values:

transform: rotate(-30deg);

This rotates the element 30 degrees counterclockwise.

Rotate Images with CSS

You can rotate images just like any other element. Here’s a simple example:

.image {
	transform: rotate(30deg);
}

Example: Rotate on Hover Make the image spin when the user hovers over it:

.image:hover {
	transform: rotate(360deg);
	transition: transform 0.5s ease-in-out;
}

This creates a smooth spinning effect, great for buttons or decorative elements.

Rotate Texts with CSS

You can use rotate to create engaging text effects. This is particularly useful for headings, banners, or artistic typography.

.rotated-text {
	transform: rotate(-15deg);
	display: inline-block;
}

To create vertical text:

.vertical-text {
	transform: rotate(90deg);
	transform-origin: left bottom;
}

Rotate Background Image with CSS

CSS doesn’t directly allow rotating background images with transform, but there’s a smart trick to achieve that by rotating a pseudo-element like ::before instead.

.rotated-bg {
	position: relative;
	width: 300px;
	height: 200px;
	overflow: hidden;
}

.rotated-bg::before {
	content: '';
	position: absolute;
	width: 150%;
	height: 150%;
	background: url('background.jpg') no-repeat center/cover;
	transform: rotate(15deg);
}

Combining CSS Rotate with Other Transformations

You can combine rotate with other transformations like scale and translate to create more complex effects. Simply include multiple transformations in the transform property:

.element {
	transform: rotate(45deg) scale(1.2) translate(10px, 20px);
}

Adding to an Existing Transform

If the element already has a transform property, just append the rotate function:

.element {
	transform: scale(1.5) rotate(30deg);
}

CSS Rotate with CSS Pro

Rotating elements becomes even easier and faster when you use CSS Pro. Here’s how CSS Pro simplifies the process:

1. Visual Editor: Instead of writing code manually, you can use CSS Pro’s easy-to-use Visual Editor to adjust the rotation angle in real-time. Simply select the element and drag and drop the controls to rotate it.
2. Instant Preview: See the results immediately as you rotate images, text, or backgrounds. No need to refresh or switch between your editor and browser.
3. Combine Transformations: CSS Pro automatically combines rotate with other transformations like scale, skew, etc.
4. CSS Snippet Generator: Once you’re satisfied, CSS Pro generates the clean CSS code for you.
5. Works Everywhere: Whether you’re working on a personal project, a client site, or an app, CSS Pro’s browser extension integrates seamlessly with any website.

Try a free demo on our website.