Comment utiliser la fonction CSS3 rotate()

Nous savons tous que la fonction rotate() en CSS3 peut faire pivoter des éléments. Elle effectue principalement des opérations de rotation dans un espace bidimensionnel. Nous allons donc vous apporter aujourd'hui un exemple pour voir comment. utilisez cette fonction rotate().

Si une valeur de perspective est définie pour l'élément lui-même ou pour l'élément, la fonction rotate3d() peut réaliser une rotation dans un espace tridimensionnel.

AssociationAttribut : transpourm-origine.

Valeur

rotate(); est une valeur d'angle, l'unité est le degré, il peut s'agir d'un nombre positif ou négatif, un nombre positif signifie une rotation dans le sens des aiguilles d'une montre , un nombre négatif est Rotation dans le sens inverse des aiguilles d'une montre.

rotateX(angele), équivalent à rotate3d(1,0,0,angle) spécifie la rotation de l'axe X dans l'espace tridimensionnel

rotateY(angele), équivalent à rotate3d(0 , 1,0,angle) spécifie la rotation de l'axe Y dans l'espace tridimensionnel

rotateZ(angele), ce qui équivaut à rotate3d(0,0,1,angle) spécifie la rotation de l'axe Z dans l'espace tridimensionnel

Grammaire

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>

Je crois que vous maîtrisez la méthode après avoir lu ces cas. Pour un contenu plus passionnant, veuillez prêter attention au site Web chinois php Autres articles connexes !

Lecture connexe :

Introduction détaillée à l'attribut border-image dans CSS3

CSS3 crée un fil d'Ariane de style circulaire Implémentation du code étapes

Étapes de mise en œuvre de la police CSS3 pour créer un effet de flamme

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!