offset-rotate

Overview

The offset-rotate property determines an element's rotation in relation to its offset-path. This rotation can either align with the path direction, stay at a fixed angle, face the opposite direction of the path or a combination of these.

Examples and Usage

To gain a better understanding of the offset-rotate property, we'll create a dynamic CSS animation using arrow-shaped elements following a custom path. These arrows will rotate differently based on the specified offset-rotate value.

HTML Structure

<div class="arrow"></div>
<div class="arrow"></div>
<div class="arrow"></div>

CSS Styling

.arrow {
  /* Arrow size and shape definition */
  width: 60px;
  height: 60px;
  clip-path: polygon(0% 0%, 5% 0%, 100% 50%, 5% 100%, 0% 100%, 20% 50%);
  background: #cd3333;
  margin: 50px;

  /* Animation and path definition */
  animation: move 4000ms infinite alternate ease-in-out;
  offset-path: path("M20,20 C30,70 170,10 170,20");
}

.arrow:nth-child(1) {
  /* The first arrow rotates to follow the path direction */
  offset-rotate: auto;
}

.arrow:nth-child(2) {
  /* The second arrow rotates to follow the path direction and adds an additional 90-degree rotation */
  offset-rotate: auto 90deg;
}

.arrow:nth-child(3) {
  /* The third arrow remains at a constant rotation of 45 degrees */
  offset-rotate: 45deg;
}

@keyframes move {
  100% {
    /* Movement of the arrow along the entire length of the path */
    offset-distance: 100%;
  }
}

In this setup, three arrows traverse a custom path defined by offset-path. The offset-rotate property determines the rotation behavior of each arrow:

• The first arrow (.arrow:nth-child(1)) utilizes offset-rotate: auto, causing it to rotate in the direction of the path.

• The second arrow (.arrow:nth-child(2)) employs offset-rotate: auto 90deg, rotating according to the path's direction with an additional 90-degree rotation.

• The third arrow (.arrow:nth-child(3)) uses offset-rotate: 45deg, maintaining a fixed rotation of 45 degrees relative to the positive x-axis throughout the animation, irrespective of the path's direction.

Moreover, the animation's progress along the path is regulated by the offset-distance property. The move keyframes animate the offset-distance property, moving the arrows from the beginning to the end of the path.

Values

Associated Properties

• offset
• offset-anchor
• offset-distance
• offset-path
• offset-position

Tips and Tricks

• Historically, this property was known as motion-rotation in earlier versions of the specification. This could be helpful to know when reading older tutorials.

• Using offset-rotate alone won't produce any noticeable result as it requires a path to dictate the element's movement.

• A combination of auto and <angle> in offset-rotate can generate compelling effects. This hybrid approach combines path-following rotation with a constant additional rotation, creating unique animation dynamics. For instance, an element could maintain its rotational identity (e.g., always tilted at a 45-degree angle) while still aligning with the path direction.

• The reverse value can be handy when you want an element to move along a path but face the opposite direction of travel.

• Remember, animations with offset-rotate and offset-path can potentially enhance user interfaces when applied judiciously. Too much movement, however, may distract and confuse users. Strike a balance for the best user experience.

Browser Compatibility

For a detailed breakdown of partial support nuances for older browser versions, refer to the first link in the Useful Resources below.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: offset-rotate

W3C's Editor's Draft of Motion Path Module Level 1: offset-rotate