CSS - offset-rotate Property

The CSS property offset-rotate specifies the orientation or direction of an element as it moves along the specified offset-path.

Possible Value

The following value are accepted for offset-rotate property.

  • auto - When the offset-rotate property is used, the element is rotated by the offset-path's angle with respect to the positive x-axis by default.

  • <angle> - Using the supplied rotation angle as a guide, the offset-rotate property transforms the element's rotation in a constant clockwise direction.

  • auto <angle> - The computed value of auto is added to the computed value of the angle when auto is followed by one.

  • reverse - The offset-rotate reverse value spins the element in the opposite direction from auto but in a manner similar to that of auto. It's the same as saying auto 180deg.

Applies to

Transformable elements

Syntax

  
offset-rotate = [ auto | reverse ] || <angle>

CSS offset-rotate - Basic Example

The following example demonstrates the usage of offset-rotate property.

   
<html>
<head>
<style>
   .div-container {
      display: flex;
   }
   .div {
      width: 60px;
      height: 60px;
      background: #2bc4a2;
      margin: 20px;
      offset-path: path("M20,20 C20,50 180,-10 180,20");
      animation: moveRotate 5s infinite linear alternate;
   }
   .div:nth-child(1) {
      offset-rotate: auto;
   }
   .div:nth-child(2) {
      offset-rotate: auto 30deg;
   }
   .div:nth-child(3) {
      offset-rotate: auto 45deg;
   }
   @keyframes moveRotate {
      0% {
         offset-distance: 0%;
      }
      100% {
         offset-distance: 100%;
      }
   }
</style>
</head>
<body>
<div class="div-container">
   <div class="div"></div>
   <div class="div"></div>
   <div class="div"></div>
</div>
</body>
</html>

Here is another example demonstrating the usage of offset-rotate property.

   
<html>
<head>
<style>
   div {
      width: 90px;
      height: 90px;
      background: #ff6384;
      margin: 20px;
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      animation: move 6000ms infinite alternate ease-in-out;
      offset-path: path("M20,20 C20,50 180,-10 180,20");
   }
   div:nth-child(1) {
      background-color: #2bc4a2;
      offset-rotate: auto;
   }
   div:nth-child(2) {
      background-color: #ffce56;
      offset-rotate: auto 45deg;
   }
   div:nth-child(3) {
      background-color: #36a2eb;
      offset-rotate: auto 90deg;
   }
   div:nth-child(4) {
      background-color: #eb34e5;
      offset-rotate: auto 120deg;
   }
      @keyframes move {
      100% {
      offset-distance: 200%;
      }
   }
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Advertisements