L'attribut transform-origin est utilisé pour changer la position de l'élément transformé. Dans un élément de transformation 2D, la position des axes x et y de l'élément peut être modifiée ; dans un élément de transformation 3D, la position de son axe Z peut également être modifiée.
Attribut CSS3 transform-origin
Fonction : L'attribut transform-origin permet de modifier le élément en cours de transformation emplacement. Les éléments de transformation 2D modifient les axes x et y de l'élément. Les éléments de transformation 3D peuvent également modifier leur axe Z.
Syntaxe :
transform-origin: x-axis y-axis z-axis;
Valeur
值
|
描述 |
| x-axis |
定义视图被置于 X 轴的何处。可能的值：
● left
● center
● right
● length
● %
|
| y-axis |
定义视图被置于 Y 轴的何处。可能的值：
● top
● center
● bottom
● length
● %
|
| z-axis |
定义视图被置于 Z 轴的何处。可能的值：length |
|
Description |
| axe des x td> |
Définit où la vue est placée sur l'axe X. Valeurs possibles : ● gauche
● centre ● droite ● longueur <!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: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
</style>
<script>
function changeRot(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('persp').innerHTML=value + "deg";
}
function changeOrg()
{
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('origin').innerHTML=x + "% " + y + "%";
}
</script>
</head>
<body>
<p>旋转红色的DIV元素，尝试更改其X轴和Y轴：</p>
<div id="div1">
<div id="div2">HELLO</div>
</div>
Rotate:
<input type="range" min="-360" max="360" value="45" onchange="changeRot(this.value)" />
transform: rotateY:(<span id="persp">45deg</span>);
<br><br>
X-axis:<input type="range" min="-100" max="200" value="20" onchange="changeOrg()" id="ox" /><br>
Y-axis:<input type="range" min="-100" max="200" value="40" onchange="changeOrg()" id="oy" />
transform-origin: <span id="origin">20% 40%</span>;
</body>
</html> ● %
|
| y - axis |
Définit où la vue est placée sur l'axe Y. Valeurs possibles :  ● haut
● centre ● bas ● longueur ● % |
| axe z td> |
Définit où la vue est placée sur l'axe Z. Valeurs possibles : longueur |
Remarque : cet attribut doit être utilisé avec l'attribut de transformation. Exemple d'utilisation de l'attribut CSS3 transform-originRendu :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
