So verwenden Sie die CSS3-Funktion rotation()

Wir alle wissen, dass die Funktion „rotieren()“ in CSS3 hauptsächlich Rotationsoperationen im zweidimensionalen Raum durchführen kann Verwenden Sie diese Funktion „Rotate()“.

Wenn für das Element selbst oder das Element ein Perspektivwert festgelegt ist, kann die Funktion „rotate3d()“ eine Drehung im dreidimensionalen Raum erreichen.

Assoziation

Attribut: transfürm-Ursprung.

Wert

rotate(0c0cb308ee3d2ee3281772bfc9b806c2);0c0cb308ee3d2ee3281772bfc9b806c2 ist ein Winkelwert, die Einheit ist Grad, es kann eine positive oder negative Zahl sein, eine positive Zahl bedeutet Drehung im Uhrzeigersinn , eine negative Zahl ist Gegen den Uhrzeigersinn drehen.

rotateX(angele), äquivalent zu rotate3d(1,0,0,angle) gibt die Drehung der , 1,0,angle) gibt die Y-Achsendrehung im dreidimensionalen Raum an

rotateZ(angele), was äquivalent zu rotate3d(0,0,1,angle) ist, gibt die Z-Achsendrehung an im dreidimensionalen Raum

Grammatik

t

ransform:rotate(<angle>);
CSS
.rotate_clockwise{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
position:absolute;
left:10px;
top:80px;
}
.rotate_anticlockwise{
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
position:absolute;
left:200px;
top:80px;
}
.rotateX{
-webkit-transform:perspective(800px) rotateX(60deg);
-moz-transform:perspective(800px) rotateX(60deg);
position:absolute;
left:400px;
top:80px;
}
.rotateY{
-webkit-transform:perspective(800px) rotateY(60deg);
-moz-transform:perspective(800px) rotateY(60deg);
position:absolute;
left:600px;
top:80px;
}
.rotateZ{
-webkit-transform:perspective(800px) rotateZ(60deg);
-moz-transform:perspective(800px) rotateZ(60deg);
position:absolute;
left:800px;
top:80px;
}
HTML
<divclass="demo_box rotate_clockwise">顺时针旋转45度</div>
<divclass="demo_box rotate_anticlockwise">逆时针旋转45度</div>
<divclass="demo_box rotateX">3维空间内X轴旋转60度</div>
<divclass="demo_box rotateY">3维空间内Y轴旋转60度</div>
<divclass="demo_box rotateZ">3维空间内Z轴旋转60度</div>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website. Weitere verwandte Artikel!

Verwandte Lektüre:

Detaillierte Einführung in das Border-Image-Attribut in CSS3

CSS3 erstellt Breadcrumbs im kreisförmigen Stil Code-Implementierung Schritte

Schritte zur Implementierung der CSS3-Schriftart, um einen Flammeneffekt zu erzeugen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS3-Funktion rotation(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!