Propiedad offset-rotate de CSS

La propiedad offset-rotate especifica la orientación de un elemento en función de su offset-distance a lo largo del offset-path.

En las primeras versiones de la especificación, esta propiedad se llamaba motion-rotation, luego se convirtió en offset-rotation y ahora se llama offset-rotate.

Esta propiedad tiene los siguientes valores: auto, reverse, <angle>.

Valor inicial	auto
Se aplica a	Elementos transformables.
Heredado	No.
Animable	Sí.
Versión	Motion Path Module Level 1
Sintaxis DOM	object.style.offsetRotate = "auto 90deg";

Sintaxis

Sintaxis de offset-rotate en CSS

css

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

Ejemplo de la propiedad offset-rotate:

Ejemplo de código de offset-rotate en CSS

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 40%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-rotate property example</h2>
      <div class="mover"></div>
    </body>
</html>

Try it Yourself »

Valores

Valor	Descripción
auto	El objeto se rota en el ángulo de la dirección de la ruta de desplazamiento.

reverse	El objeto se rota en el ángulo de la dirección de la ruta de desplazamiento más 180 grados.
`<angle>`	La caja tiene una transformación de rotación horaria constante aplicada en el ángulo de rotación especificado.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué se puede lograr usando la propiedad CSS offset-rotate?

Controla la orientación del elemento.Establece el color del elemento.Posiciona el elemento en relación con su posición normal.Crea transformaciones 3D para un elemento.Establece el punto de rotación en relación con la propiedad position.

Propiedad offset-rotate de CSS ​

Sintaxis ​

Ejemplo de la propiedad offset-rotate: ​

Valores ​

Práctica ​

Propiedad offset-rotate de CSS

Sintaxis

Ejemplo de la propiedad offset-rotate:

Valores

Práctica