Tutoriel sur la propriété CSS transform-origin

La propriété transform-origin en CSS permet de définir le point d'origine des transformations appliquées à un élément.

Syntaxe générale de la propriété CSS transform-origin

La syntaxe générale de la propriété transform-origin est la suivante :

transform-origin: x-axis y-axis z-axis;

Les valeurs possibles pour x-axis, y-axis et z-axis peuvent être des unités de longueur, des pourcentages ou des mots-clés spécifiques.

Valeurs par défaut	50% 50% 0
Inherited:	non
Animable :	oui En savoir plus sur l'animable
Version:	CSS3
Syntaxe JavaScript:	object.style.transformOrigin="0 0"

Exemples pratiques d'utilisation de la propriété CSS transform-origin

Exemple 1: Déplacement de l'origine de transformation

Dans cet exemple, nous déplaçons l'origine de transformation vers le coin supérieur gauche de l'élément.

Exemple : Copier le code

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Tutoriel : propriété css transform-origin</title>
    <style>
    .example {
      margin: 30px;
    }
    .example p {
      font-size: 14px;
      margin: 30px;
    }    
    .example .box {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      margin-bottom: 10px;
      transform-origin: top left;
      transition: transform 0.3s ease;
    }    
    .example .box:hover {
      transform: rotate(45deg);
    }  transform: translateZ(300px);
    </style>
</head>
<body>
    <h1> CSS propriété transform-origin </h1>
	<div class="example">
	     <div class="box">Passez votre souris sur cette boîte pour voir l'effet de la transform-origin en action :</div>
  </div>
</body>
</html>

Passez votre souris sur cette boîte pour voir l'effet de la transform-origin en action :

Exemple 2: Origine de transformation différente selon les axes

Dans cet exemple, nous définissons une origine de transformation différente selon les axes X et Y.

Reprenez l’exemple ci-dessus et modifier transform-origin comme suit :

transform-origin: center bottom;

Passez votre souris sur cette boîte pour voir l'effet de la transform-origin en action :

Exemple 3: Origine de transformation en pourcentage

Dans cet exemple, nous utilisons des pourcentages pour définir l'origine de transformation.

Reprenez l’exemple ci-dessus et modifier transform-origin comme suit :

transform-origin: 25% 25%;

Passez votre souris sur cette boîte pour voir l'effet de la transform-origin en action :

Exemple 4: Utilisation de mots-clés prédéfinis

Il existe également des mots-clés prédéfinis pour définir l'origine de transformation.

Reprenez l’exemple ci-dessus et modifier transform-origin comme suit :

transform-origin: top right;

Passez votre souris sur cette boîte pour voir l'effet de la transform-origin en action :

Astuces et conseils d'utilisation de la propriété CSS transform-origin

Voici quelques astuces et conseils pour utiliser la propriété transform-origin :

Expérimentez avec différentes valeurs d'origine de transformation pour obtenir l'effet souhaité.
Utilisez des valeurs en pourcentage pour créer des effets de transformation plus dynamiques et réactifs.
Combinez la propriété transform-origin avec d'autres propriétés de transformation, telles que rotate ou scale, pour créer des animations complexes.
N'oubliez pas que la propriété transform-origin est basée sur le système de coordonnées de l'élément parent. Assurez-vous de comprendre la disposition de vos éléments et comment cela affecte l'origine de transformation.
Utilisez des outils de développement tels que les inspecteurs CSS pour ajuster facilement les valeurs d'origine de transformation en temps réel.

Combinez transform-origin avec d'autres propriétés de transformation, telles que rotate ou scale, pour créer des animations complexes.

Lorsque vous utilisez transform-origin en conjonction avec d'autres propriétés de transformation CSS, vous pouvez créer des animations et des effets visuels complexes. Voici quelques exemples de combinaisons possibles :

1. Rotation autour d'un point spécifique :

En utilisant la propriété rotate et en définissant l'origine de transformation avec transform-origin, vous pouvez faire tourner un élément autour d'un point précis. Par exemple :

Code css

   .element {
     transform-origin: 50% 50%;
     transform: rotate(45deg);
   }

2. Mise à l'échelle avec un point d'ancrage spécifique :

Vous pouvez appliquer une mise à l'échelle à un élément en utilisant la propriété scale et en définissant l'origine de transformation avec transform-origin. Cela permet de contrôler où l'élément sera agrandi ou réduit. Par exemple :

Code css

  .element {
     transform-origin: top left;
     transform: scale(2);
   }

3. Combinaison de plusieurs transformations :

Vous pouvez combiner plusieurs propriétés de transformation, telles que rotate, scale et translate, en utilisant transform-origin pour définir l'origine de chaque transformation. Cela vous donne un contrôle total sur les animations complexes. Par exemple :

Code css

   .element {
     transform-origin: center;
     transform: rotate(45deg) scale(1.5) translateX(50px);
   }

Expérimentez avec ces combinaisons pour créer des animations fluides et des effets visuels intéressants. N'oubliez pas d'ajuster l'origine de transformation selon vos besoins pour obtenir les résultats souhaités.

En conclusion, la propriété CSS transform-origin est un outil puissant pour contrôler l'origine des transformations appliquées à un élément. En comprenant comment l'utiliser efficacement, vous pouvez créer des effets visuels intéressants et améliorer l'interactivité de vos sites web.

Prise en charge de la propriété dans les navigateurs

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.

Les numéros suivis de -webkit- , -moz- ou -o- indiquent la première version qui fonctionne avec un préfixe.

Propriété
transform-origine (2 valeurs)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 10.5 -o-
transform-origin (3 valeurs)	36.0 12.0 -webkit-	12.0	10.0	9.0 4.0 -webkit-	23.0 15.0 -webkit-