rotate() | CSS-Tips

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

For instance, utilizing rotate() we are able to rotate the hand across the clock:

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

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

The rotate() capabilities is outlined within the CSS Transforms Module Degree 1 specification.

Syntax

rotate() = rotate( [  |  ] )

Arguments

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

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

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

The rotate() perform accepts a single  argument, which dictates the route of its spin. A constructive argument spins the component clockwise, whereas a unfavorable 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 heart axis. To vary the rotation level, we’ve got to go a particular level to the transform-origin property that’ll function the axis of rotation.

Primary utilization

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

So, if we’ve got a button like this:

  +
  Open Part

We will sprinkle a bit of JavaScript in there to set off an .lively class when the button is clicked, which rotates the icon:

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

Have you ever seen these menus that change 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 traces:

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

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

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

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

.hamburger.lively .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 standard 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 “Function” label subsequent to a weblog put up and rotate it vertically for an attention-grabbing visible impact.

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

Demo

Let’s have a look at a extra complicated animation to show simply how neat it’s to rotate() issues with CSS. For those who “Rerun” the demo, you’ll see the photograph swing forwards and backwards. It’s also possible to drag the photograph from left to proper to rotate it.

Specification

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

Browser assist

Associated