suchen

Heim >Web-Frontend >CSS-Tutorial >So verwenden Sie das transform-origin-Attribut

So verwenden Sie das transform-origin-Attribut

青灯夜游
青灯夜游Original
2019-02-11 14:58:565146Durchsuche

Das transform-origin-Attribut wird verwendet, um die Position des transformierten Elements zu ändern. Bei 2D-Transformationselementen kann die Position der x- und y-Achse des Elements geändert werden; bei 3D-Transformationselementen kann auch die Position seiner Z-Achse geändert werden.

So verwenden Sie das transform-origin-Attribut

CSS3-Transform-Origin-Attribut

Funktion: Mit dem Transform-Origin-Attribut können Sie das ändern Element, das transformiert wird, Ort. 2D-Transformationselemente ändern die x- und y-Achsen des Elements. 3D-Transformationselemente können auch ihre Z-Achse ändern.

Syntax: 

transform-origin: x-axis y-axis z-axis;
tr>
Wert
值
 描述
x-axis

 定义视图被置于 X 轴的何处。可能的值：

  ●  left 

  ●  center  

  ●  right 

  ●  length  

  ●  % 
y-axis 

 定义视图被置于 Y 轴的何处。可能的值：

  ●  top 

  ●  center 

  ●  bottom

  ●  length

  ●  %
z-axis 定义视图被置于 Z 轴的何处。可能的值：length
Beschreibung
x-axis

Definiert, wo die Ansicht auf der X-Achse platziert wird. Mögliche Werte: ● links

● Mitte ● rechts

● Länge


● %

y - axis

Definiert, wo die Ansicht auf der Y-Achse platziert wird. Mögliche Werte: So verwenden Sie das transform-origin-Attribut

● oben ● Mitte ● unten ● Länge ● %
z-achse Definieren Sie, wo die Ansicht auf der Z-Achse platziert wird. Mögliche Werte: Länge
Hinweis: Dieses Attribut muss zusammen mit dem Transformationsattribut verwendet werden. Verwendungsbeispiel des CSS3-Transform-Origin-Attributs
<!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(&#39;div2&#39;).style.transform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.msTransform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.webkitTransform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.MozTransform="rotate(" + value + "deg)";
document.getElementById(&#39;div2&#39;).style.OTransform="rotate(" + value + "deg)";
document.getElementById(&#39;persp&#39;).innerHTML=value + "deg";
}
function changeOrg()
{
var x=document.getElementById(&#39;ox&#39;).value;
var y=document.getElementById(&#39;oy&#39;).value;
document.getElementById(&#39;div2&#39;).style.transformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.msTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.webkitTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.MozTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;div2&#39;).style.OTransformOrigin=x + &#39;% &#39; + y + &#39;%&#39;;
document.getElementById(&#39;origin&#39;).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>
Rendering:

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das transform-origin-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie das Transformationsstil-AttributNächster Artikel：So verwenden Sie das Transformationsstil-Attribut

In Verbindung stehende Artikel

Mehr sehen