Propriété CSS transform-origin
La propriété transform-origin vous permet de modifier l'origine de la transformation d'un élément.
La propriété transform-origin fait partie des propriétés CSS3.
La propriété transform-origin ne prend effet que lorsqu'une fonction de transformation est appliquée à l'élément via la propriété transform.
Cette propriété peut être spécifiée à l'aide de mots-clés de décalage, de valeurs de longueur ou de pourcentages.
INFO
Historiquement, le préfixe -webkit- était utilisé pour Safari, Chrome et les anciennes versions d'Opera. Les navigateurs modernes n'exigent plus de préfixes propriétaires pour cette propriété.
| Valeur initiale | 50% 50% 0 |
|---|---|
| S'applique à | Éléments transformables. |
| Héritée | Non. |
| Animable | Oui. Le degré est animable. |
| Version | CSS3 |
| Syntaxe DOM | Object.style.transform-origin = "10% 30%"; |
Syntaxe
Valeurs de transform-origin en CSS
transform-origin: x-offset y-offset z-offset | initial | inherit;Exemple de la propriété transform-origin :
Exemple de code CSS pour transform-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.big {
position: relative;
height: 300px;
width: 300px;
margin: 80px;
padding: 5px;
border: 2px solid #666666;
background-color: #eeeeee;
}
.little {
padding: 60px;
position: absolute;
border: 2px solid #666666;
background-color: #8ebf42;
-webkit-transform: rotate(35deg);
-webkit-transform-origin: 70% 90%;
transform: rotate(35deg);
transform-origin: 70% 90%;
}
</style>
</head>
<body>
<h2>Transform-origin property example</h2>
<div class="big">
<div class="little">Box</div>
</div>
</body>
</html>Résultat
Un autre exemple qui montre la différence entre les valeurs.
Exemple de transform-origin avec quatre valeurs :
Autre exemple de code CSS pour transform-origin
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #eeeeee;
font-size: 1.1em;
font-family: 'Roboto', Helvetica, sans-serif;
}
.container {
margin: 10px auto;
max-width: 700px;
}
.wrap {
width: 150px;
height: 150px;
border: 2px solid #666666;
display: inline-block;
margin: 100px;
}
.box {
width: 150px;
height: 150px;
position: relative;
color: #eeeeee;
text-align: center;
line-height: 150px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}
.a {
background-color: #0747af;
}
.b {
background-color: #40b530;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.c {
background-color: #666666;
-webkit-transform-origin: 90% 120%;
transform-origin: 90% 120%;
}
.d {
background-color: #ffdb11;
-webkit-transform-origin: 80px 40px;
transform-origin: 80px 40px;
}
</style>
</head>
<body>
<h2>Transform-origin property example</h2>
<div class="container">
<div class="wrap">
<div class="box a">
50% 50%
</div>
</div>
<div class="wrap">
<div class="box b">
top left
</div>
</div>
<div class="wrap">
<div class="box c">
90% 120%
</div>
</div>
<div class="wrap">
<div class="box d">
80px 40px
</div>
</div>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
x-offset | Spécifie la position horizontale. Accepte des mots-clés (left, center, right), des longueurs ou des pourcentages. |
y-offset | Spécifie la position verticale. Accepte des mots-clés (top, center, bottom), des longueurs ou des pourcentages. |
z-offset | Spécifie la position en profondeur le long de l'axe z pour les transformations 3D. Accepte des valeurs de longueur. |
initial | Définit cette propriété à sa valeur par défaut. |
inherit | Hérite cette propriété de son élément parent. |
Pratique
La propriété transform-origin ne fonctionne qu'avec