CSS offset-rotate Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The offset-rotate CSS property defines the orientation/direction of an element as it is positioned along the offset-path. It is a relatively new property, and is still under development in some browsers. The offset-path property defines a path along which an element can be animated. The offset-rotate property controls how the element is rotated as it moves along the path.

Initial value
auto
Applies to
transformable elements
Inherited
no
Computed value
as specified
Animatable
as <angle>, <basic-shape> or path()
JavaScript syntax
object.style.offsetRotate

Interactive Demo

Syntax

offset-rotate: auto | <angle> | auto <angle> | reverse

Values

  • autoThe element is rotated by the angle of the direction of the offset-path, relative to the positive x-axis. This is the default value.
  • <angle>The element has a constant clockwise rotation transformation applied to it by the specified rotation angle.
  • auto <angle>If auto is followed by an <angle>, the computed value of the angle is added to the computed value of auto.
  • reverseThe element is rotated similar to auto, except it faces the opposite direction. It is the same as specifying a value of auto 180deg.

Example

<div></div>
<div></div>
<div></div>
div {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;

  offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

Browser Support

The following table will show you the current browser support for the CSS offset-rotate property.

Desktop
Edge Chrome Firefox Opera Safari
79567243?
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
567943x656

Last updated by CSSPortal on: 3rd January 2024