rotate() | CSS-Tips

The CSS rotate() perform spins a component both clockwise or counterclockwise in a 2D aircraft. It’s considered one of many rework features used within the rework property.

For instance, utilizing rotate() we will rotate the hand across the clock:

.seconds-hand {
  rework: rotate(var(--deg));
  transform-origin: backside middle;
}

For rotating components tri-dimensionally, think about using rotateX() and rotateY().

The rotate() features is outlined within the CSS Transforms Module Stage 1 specification.

Syntax

rotate() = rotate( [  |  ] )

Arguments

/*  */
rotateZ(90deg) /* Rotates 90 levels clockwise  */
rotateZ(-180deg) /* Rotates 180 levels counterclockwise */

/*  in turns */
rotateZ(0.25turn) /* Rotates a quater flip clockwise. */
rotateZ(1turn)    /* Rotates a full 360-degree flip. */

/*  in radians */
rotateZ(1.57rad)  /* Rotates ~90 levels clockwise. */
rotateZ(-3.14rad) /* Rotate ~180 levels counterclockwise. */

The rotate() perform accepts a single  argument, which dictates the route of its spin. A optimistic argument spins the component clockwise, whereas a detrimental argument spins the component counterclockwise.

The  kind has 4 items to select from:

• deg: One diploma is 1/360 of a full circle.
• grad: One gradian is 1/400 of a full circle.
• rad: A radian is the size of a circle’s diameter across the form’s arc. One radian is 180deg, or 1/2 of a full circle. One full circle is 2π radians, which is the same as 6.2832rad or 360deg.
• flip: One flip is one full circle. So, midway round a circle is the same as .5turn, or 180deg.

Additionally, rotate() spins the component round its middle axis. To vary the rotation level, we’ve to go a selected level to the transform-origin property that’ll function the axis of rotation.

Fundamental utilization

The rotate() perform is the spine of among the fundamental animations you’ve almost certainly come throughout on, like switching from “+” to “x” when an accordion is opened. We will do this by rotating the “+” image by 45deg.

So, if we’ve a button like this:

  +
  Open Part

We will sprinkle slightly JavaScript in there to set off an .energetic class when the button is clicked, which rotates the icon:

.toggle.energetic .icon {
  rework: rotate(45deg);
}

Have you ever seen these menus that swap from a hamburger icon to a closing “X” icon when a menu dropdown or sidebar is opened? That’s a rotation, too!

We begin with three spans which might be styled as horizontal strains:

.bar {
  width: 100%;
  peak: 4px;
  background: #333;
  transition: rework 0.3s ease, opacity 0.3s ease;
}

Discover we’ve a transition in there in order that, when the button is clicked and the rotation occurs (once more, utilizing JavaScript to toggle on an .energetic class), the spans rework easily:

.hamburger.energetic .high {
  rework: translateY(14px) rotate(45deg);
}

.hamburger.energetic .center {
  opacity: 0;
}

.hamburger.energetic .backside {
  rework: translateY(-14px) rotate(-45deg);
}

Instance: Loading icons

We will additionally use rotate() for loading indicators. Loading indicators often spin whereas a web page is, you already know, loading. A typical instance is a semi-circle that spins till the web page is finished loading.

The .spinner makes use of the CSS animation shorthand to outline an infinite spinning loading indicator, and the @keyframes spin defines a 360deg spin with the rotate() perform.

.spinner {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    rework: rotate(360deg);
  }
}

Now the spinner retains on a’spinning:

Instance: Rotating textual content

Rotating issues isn’t all the time about animation! We will, for instance, place one thing like a “Characteristic” label subsequent to a weblog publish and rotate it vertically for an attention-grabbing visible impact.

.vertical-header {
  writing-mode: vertical-rl;
  rework: rotate(180deg);
}

Demo

Let’s take a look at a extra complicated animation to exhibit simply how neat it’s to rotate() issues with CSS. For those who “Rerun” the demo, you’ll see the picture swing backwards and forwards. You can too drag the picture from left to proper to rotate it.

Specification

The CSS rotate() perform is outlined within the CSS Transforms Module Stage 1 specification, which is presently in Editor’s Draft.

Browser help

Associated