2.1 Propriété transform-origin
La propriété transform-origin en CSS définit le point, par rapport auquel les transformations sont appliquées, telles que rotate, scale, skew, et translate. Par défaut, ce point est situé au centre de l'élément, mais tu peux changer sa position pour obtenir les effets visuels souhaités.
Notions de base de transform-origin
Syntaxe de la propriété transform-origin :
element {
transform-origin: x-axis y-axis z-axis;
}
Où :
x-axis: définit la position du point sur l'axe horizontaly-axis: définit la position du point sur l'axe verticalz-axis: définit la position du point sur l'axe Z (utilisé pour les transformations 3D)
Valeurs possibles :
- Mots-clés:
top,right,bottom,left,center - Valeurs en pourcentage: spécifient le point d'origine en pourcentages de la taille de l'élément
- Valeurs absolues: spécifient le point d'origine en pixels ou autres unités de mesure
Exemples de valeurs :
transform-origin: 50% 50%;— centre de l'élément (valeur par défaut)transform-origin: 0 0;— coin supérieur gauche de l'élémenttransform-origin: 100% 100%;— coin inférieur droit de l'élémenttransform-origin: 50px 100px;— déplacement de 50 pixels à droite et 100 pixels vers le bas depuis le coin supérieur gauche
Centrage du point d'origine (par défaut)
Dans cet exemple, la transformation rotate se fera autour du centre de l'élément.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrage du point d'origine</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 Déplacement du point
Déplacement du point d'origine vers le coin supérieur gauche
Dans cet exemple, le point d'origine de la transformation est déplacé vers le coin supérieur gauche de l'élément.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Point d'origine dans le coin supérieur gauche</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Déplacement du point d'origine vers le coin inférieur droit
Dans cet exemple, le point d'origine de la transformation est déplacé vers le coin inférieur droit de l'élément.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Point d'origine dans le coin inférieur droit</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 Définition des valeurs
Utilisation des valeurs en pourcentage
Dans cet exemple, le point d'origine de la transformation se trouve à 25% en horizontal et 75% en vertical.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Point d'origine avec des valeurs en pourcentage</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Utilisation des valeurs absolues
Dans cet exemple, le point d'origine de la transformation est déplacé de 50 pixels en horizontal et 20 pixels en vertical.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Point d'origine avec des valeurs absolues</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 Application pratique
Rotation d'un élément autour d'un point spécifique
Utiliser transform-origin est utile pour la création d'éléments rotatifs qui doivent tourner autour d'un point spécifique. Par exemple, créer une aiguille d'horloge.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotation de l'aiguille d'une horloge</title>
<style>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* Exemple pour la position à 1 heure */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
Création d'un élément extensible
Changer le point d'origine est également utile pour agrandir les éléments par rapport à différents points, ce qui peut être pratique pour créer des interfaces dynamiques.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Élément extensible</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
GO TO FULL VERSION