OUJOOD.COM
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>
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;
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%;
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;
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- |