La propriété css offset-rotate

La propriété css offset-rotate Définition et utilisation

La propriété CSS offset-rotate permet de faire pivoter un élément autour de son point d'ancrage (son centre par défaut) tout en le déplaçant horizontalement et verticalement par rapport à son emplacement d'origine. Cette propriété est particulièrement utile pour créer des effets de parallaxe ou de défilement.

Syntaxe de la propriété css offset-rotate

offset-rotate: <angle> <x-offset> <y-offset>;

Valeurs par défaut	auto
Inherited:	non
Animable :	oui En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.offsetRotate="45deg"

Les valeurs possibles de la propriété css offset-rotate

<angle>: spécifie l'angle de rotation en degrés. Les valeurs positives font tourner l'élément dans le sens des aiguilles d'une montre, tandis que les valeurs négatives font tourner l'élément dans le sens inverse des aiguilles d'une montre.
<x-offset>: spécifie le décalage horizontal de l'élément par rapport à son emplacement d'origine. Les valeurs positives déplacent l'élément vers la droite, tandis que les valeurs négatives le déplacent vers la gauche.
<y-offset>: spécifie le décalage vertical de l'élément par rapport à son emplacement d'origine. Les valeurs positives déplacent l'élément vers le bas, tandis que les valeurs négatives le déplacent vers le haut.

Exemples d'utilisation :

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>La propriété CSS offset-rotate </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  #frameDiv {
    width: 400px;
    height: 200px;
    margin: 20px;
    position: relative;
    border: solid black 1px;
    background-color: rgb(5, 100, 205);
  }

  img {
    position: absolute;
    z-index: 1;
    width: 70px;
    offset-path: path('M 50 100 L 350 100');
    offset-rotate: 0.20turn;
    animation: moveImg 5s 3;
  }

  svg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }

  @keyframes moveImg {
    100%  { offset-distance: 100%; }
  }
</style>
</head>
<body>

<h1>La propriété offset-rotation utilisant l'unité 'turn' (tour)</h1>

<div id="frameDiv">
  <svg fill="none" stroke="gray" stroke-width="2" stroke-dasharray="5,5">
    <path d="M 50 100 L 350 100" />
  </svg>
  <img id="fish1" src="images/poisson.svg" alt="poisson">
</div>

<p>Le poisson est tourné de 0,20 tour, ce qui correspond à un 1/5 de tour ou à 72 degrés.</p>

</body>
</html>

Il est important de noter que la propriété offset-rotate est expérimentale et n'est pas encore prise en charge par tous les navigateurs.