Offset-rotate - Propriété CSS

Schéma de la syntaxe de offset-rotate.

Description des termes utilisés sur le schéma :

• angle est une valeur numérique suivie d'une des unités d'angle.

Description de la propriété offset-rotate.

On parle ici de déplacement suivant un chemin (Motion Path). Pour mettre en oeuvre cette fonctionnalité, nous avons besoin des élément suivants. L'élément mobile peut se positionner n'importe où sur le chemin, et son orientation et automatiquement ajustée pour tangenter ce chemin.

L'objectif de la propriété offset-rotate est d'appliquer une rotation à l'élément mobile. Cet angle de rotation pourra être modifié au fur et à mesure du déplacement de l'élément mobile sur le chemin pour que l'élément mobile soit toujours tangent à ce chemin.
Dans le cas d'une forme significative (comme une voiture ou un avion) il faut que le déplacement corresponde au dessin. Sur le premier exemple ci-dessous, la voiture est dessinée avec l'avant vers la droite : son déplacement correspond à sa forme. Mais dans le cas de l'avion, il est dessiné vers le haut ; cela ne correspondra pas à son déplacement.

Nous vous invitons à consulter également la propriété résumée offset qui permet de définir en une seule écriture toutes les propriétés relatives du déplacement. Cette page présente également un tutoriel sur les déplacement suivant un chemin.

Propriétés en rapport.

Nous vous invitons à consulter également la propriété résumée offset qui permet de définir en une seule écriture toutes les propriétés relatives aux déplacements suivant un chemin, ou aux pages ci-dessous, concernant les autres propriétés ou fonctions en rapport.

Valeurs pour offset-rotate.

• offset-rotate: auto;

  L'orientation du mobile sera déterminée par rapport à la tangente du chemin à l'endroit où se trouve le mobile. Cette valeur permet une orientation automatique du mobile pour qu'il soit toujours dans l'axe du chemin. Ici le chemin est le pourtour du parent.

  Le mobile est ici une image, celle qui est représentée au centre, avec son orientation originale. Une animation sur offset-distance a été définie.

  
  
  offset-rotate:auto;
• offset-rotate: reverse;

  Comme pour la valeur auto le mobile est orientée suivant l'axe du chemin, mais une rotation de 180° est également appliquée.

  
  
  offset-rotate:reverse;
• offset-rotate: 45deg;

  La valeur indiquée, positive ou négative, doit être suivie d'une des unités d'angle. L'élément mobile sera tourné de la valeur indiquée, et cette orientation sera constante : on perd donc l'orientation automatique en fonction du chemin.

  
  
  offset-rotate:45deg;

  
  L'élément mobile tourne autour de son point d'ancrage. Ce dernier est défini par offset-anchor. Par défaut il est situé au milieu de l'élément mobile.

  

  offset-rotate:45deg;
offset-anchor:auto;

  

  offset-rotate:45deg;
offset-anchor:20px 0px;
• offset-rotate: auto -45deg;

  En cumulant une valeur prédéfinie (auto ou reverse) et une valeur angulaire, il est possible de conserver l'orientation automatique tout en orientant le mobile dans le sens du déplacement lorsque ce n'est pas le cas dans la forme originale.

  
  
  offset-rotate:auto -45deg;
• offset-rotate: initial; (auto) offset-rotate: inherit; offset-rotate: revert; offset-rotate: revertLayer; offset-rotate: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de offset-rotate.

Toutes les propriétés relatives au déplacement sur un chemin (Motion path) peuvent être animées. C'est vrai aussi pour la propriété offset-rotate.

Ici deux animations ont été appliquées à l'élément mobile. La première sur offset-distance pour lui permettre de parcourir son chemin. La deuxième sur offset-rotate, ce qui le fait tourner sur lui-même.

Exemple interactif avec la propriété offset-rotate.

Le simulator illustre le parcours du contour de l'élément conteneur. Une animation a été ajoutée pour bien visualiser ce trajet. Vous pouvez ajuster la valeur de offset-rotate.

Compatibilité des navigateurs avec offset-rotate.

1

Déplacement
suivant un chemin

2

Propriété
offset-rotate

Estimation de la prise en charge globale.

95%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari sur IOS

Safari

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété offset-rotate.

• Déplacements suivant un chemin - Niveau 1.

  Introduction de la notion de déplacement suivant un chemin et des propriétés qui gèrent cette fonctionnalité, dont offset-rotate.
  

  09 Avril 2015

  Document de travail.

  

  

  

Voir aussi, au sujet des Motion Path.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété offset-rotate fait partie du module Motion Path.. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :