CSS offset-rotate Property


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
Applies to
transformable elements
Computed value
as specified
as <angle>, <basic-shape> or path()
JavaScript syntax

Interactive Demo


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


  • 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.


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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 3rd January 2024