CSS3 La propriété transform-origin

...

Les propriétés CSS

Exemple Définir le placement de base d’une rotation d’un élément :

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: #f0f;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari et Chrome */
-webkit-transform-origin:20% 40%; /* Safari et Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2"> B O N J O U R </div>
</div>
</body>
</html>

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

La propriété transform-origin est prise en charge dans Internet Explorer 10, Firefox et Opera.

Internet Explorer 9 prend en charge une solution de rechange, la propriété -ms-transform-origin, mais seulement pour 2D-transformations.

Safari et Chrome prend en charge une solution de rechange, la propriété - webkit-transform-origin, sur les deux 2D et 3D-transfoms.

Opera supporte uniquement les transformations 2D.

Définition et utilisation

La propriété transform-origin vous permet de modifier la position des éléments transformés.

Pour l’élément transformé 2D on peut changer sa position sur les axes x et y de l'élément.

Pour l’élément transformé 3D on peut également modifier l'axe z de l'élément.

Pour mieux comprendre la propriété transform-origin, voici un exemple :

Exemple Copier le code

<!DOCTYPE html>
<html>
<head>                                           
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:40px;
position: absolute;
border: 1px solid black;
background-color: blue;
transform: rotate(0deg);
transform-origin:10% 20%;
-ms-transform: rotate(0deg); /* IE 9 */
-ms-transform-origin:10% 20%; /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari et Chrome */
-webkit-transform-origin:20% 20%; /* Safari et Chrome */
-moz-transform: rotate(0deg); /* Firefox */
-moz-transform-origin:10% 20%; /* Firefox */
-o-transform: rotate(0deg); /* Opera */
-o-transform-origin:10% 20%; /* Opera */
}
</style>
<script>
function changeRotation(value)
{
document.getElementById('div2').style.transform="rotate(" + value
+ "deg)";
document.getElementById('div2').style.msTransform="rotate(" +
value + "deg)";
document.getElementById('div2').style.webkitTransform="rotate(" +
value + "deg)";
document.getElementById('div2').style.MozTransform="rotate(" +
value + "deg)";
document.getElementById('div2').style.OTransform="rotate(" +
value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
function changeOrigine()
{
var x=document.getElementById('ox').value;
var y=document.getElementById('oy').value;
document.getElementById('div2').style.transformOrigin=x + '% ' +
y + '%';
document.getElementById('div2').style.msTransformOrigin=x + '% '
+ y + '%';
document.getElementById('div2').style.webkitTransformOrigin=x +
'% ' + y + '%';
document.getElementById('div2').style.MozTransformOrigin=x + '% '
+ y + '%';
document.getElementById('div2').style.OTransformOrigin=x + '% ' +
y + '%';
document.getElementById('origine').innerHTML=x + "% " + y +
"%";           
}
</script>
</head>
<body>
<p>Rotation du div bleu on changeant l'axe X et l'axe
Y:</p>
<div id="div1">
  <div id="div2"> Bonjour </div>
</div>
Rotation:
<input type="range" min="-360" max="360" value="0"
onchange="changeRotation(this.value)" />
transformation: rotation sur l'axe Y de :(<span
id="span1">0deg</span>);
<br><br>
X-axe:<input type="range" min="-100" max="200" value="10"
onchange="changeOrigine()" id="ox" /><br>
Y-axe:<input type="range" min="-100" max="200" value="20"
onchange="changeOrigine()" id="oy" />
transform-origin: <span id="origine">10% 20%</span>;
</body>
</html>

Remarque : Cette propriété doit être utilisée conjointement avec la propriété transform .

Pour mieux comprendre cette propriété pour 3D transforme, voici un exemple :

Exemple Copier le code

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotateY(70deg);
transform-origin:50% 50% 100px;
-webkit-transform: rotateY(70deg); /* Safari et Chrome */
-webkit-transform-origin:50% 50% 100px; /* Safari et Chrome */
}
</style>
<script>
function changeRotation(value)
{
document.getElementById('div2').style.transform="rotateY(" +
value + "deg)";
document.getElementById('div2').style.webkitTransform="rotateY("
+ value + "deg)";
document.getElementById('div2').style.MozTransform="rotateY(" +
value + "deg)";
document.getElementById('div2').style.OTransform="rotateY(" +
value + "deg)";
document.getElementById('persp').innerHTML=value + "deg";
}
function changeOrigine()
{
var x=document.getElementById('ox').value;
var y=document.getElementById('oy').value;
var z=document.getElementById('oz').value;
document.getElementById('div2').style.transformOrigin=x + '% ' +
y + '% ' + z + 'px';
document.getElementById('div2').style.webkitTransformOrigin=x +
'% ' + y + '% ' + z + 'px';
document.getElementById('div2').style.MozTransformOrigin=x + '% '
+ y + '% ' + z + 'px';
document.getElementById('div2').style.OTransformOrigin=x + '% ' +
y + '% ' + z + 'px';
document.getElementById('origin').innerHTML=x + "% " + y + "% " +
z + "px";           
}
</script>
</head>
<body>
<p><b>Remarque :</b> Internet Explorer 9 et
versions antérieur ne supportent pas la
3D-transformations.</p>
<p>Faire pivoter l'élément div rouge, essayez de changer
ses x, y et Z :</p>
<div id="div1">
  <div id="div2"> BONJOUR </div>
</div>
Rotation:<br>
<input type="range" min="-360" max="360" value="70"
onchange="changeRotation(this.value)" /><br>
transform: rotateY:(<span id="persp">70deg</span>);
<br>
X-axe:<input type="range" min="-100" max="200" value="50"
onchange="changeOrigine()" id="ox" /><br>
Y-axe:<input type="range" min="-100" max="200" value="50"
onchange="changeOrigine()" id="oy" /><br>
Z-axe:<input type="range" min="-100" max="200" value="100"
onchange="changeOrigine()" id="oz" /><br>
transform-origin: <span id="origin">50% 50%
100px</span>;
</body>
</html>

Valeur par défaut :	50 % 50 % 0
Héritée :	non
Version:	CSS3
Syntaxe JavaScript :	objet.style.transformOrigin="20% 40 %"

Syntaxe

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

Valeur	Description
x-axe	Définit où la vue est placée dans l'axe des abscisses (axe x). Valeurs possibles : left center right length %
y-axe	Définit où la vue est placée sur l'axe y. Valeurs possibles : top center bottom length %
z-axe	Définit où la vue est placée sur l'axe z. Valeurs possibles: length

Sommaire

Par carabde 10 mars 2014

CSS3 La propriété transform-origin

Les propriétés CSS par ordre alphabétique

...

Exemple Définir le placement de base d’une rotation d’un élément :

Voir aussi nos tutoriel :