So legen Sie den Rotationsreferenzpunkt für CSS3-Animationen fest-Front-End-Fragen und Antworten-php.cn

So legen Sie den Rotationsreferenzpunkt für CSS3-Animationen fest

WBOY

Freigeben： 2022-06-14 15:56:30

Original

1532 Leute haben es durchsucht

In CSS3 können Sie das Attribut „transform-origin“ verwenden, um den Rotationsreferenzpunkt des Elements festzulegen. Dieses Attribut wird verwendet, um die Position der Rotation des Elements zu ändern Position des Elements auf der x- und y-Achse. Durch Drehen eines Elements kann die Position des Elements auf der x-Achse, der y-Achse und der z-Achse geändert werden. Die Syntax lautet „transform-origin:X-“. Achsenrichtungsposition Y-Achsenrichtungsposition Z-Achsenrichtungsposition;".

So legen Sie den Rotationsreferenzpunkt für CSS3-Animationen fest

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So legen Sie den Rotationsreferenzpunkt für CSS3-Animationen fest

Legen Sie den Rotationsreferenzpunkt mit dem Attribut „transform-Origin“ fest.

Mit dem Attribut „transform-Origin“ können Sie die Position des transformierten Elements ändern.

2D-Transformationselement kann die X- und Y-Achse des Elements ändern. Transformieren Sie Elemente in 3D und ändern Sie auch die Z-Achse des Elements.

Sie müssen das Transformationsattribut verwenden, bevor Sie dieses Attribut verwenden.

Die Syntax lautet:

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

Nach dem Login kopieren

x-Achse

Definiert, wo die Ansicht auf der X-Achse platziert wird.

y-Achse

Definiert, wo auf der Y-Achse die Ansicht platziert wird.

z-Achse

Definiert, wo auf der Z-Achse die Ansicht platziert wird.

Das Beispiel sieht wie folgt aus:

<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: red;
transform: rotate(45deg);
transform-origin:50% 50%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:50% 50%; /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
</body>

Nach dem Login kopieren

Ausgabeergebnis:

So legen Sie den Rotationsreferenzpunkt für CSS3-Animationen fest

(Freigabe von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo legen Sie den Rotationsreferenzpunkt für CSS3-Animationen fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!