Maison > Article > interface Web > Comment définir le retournement de police en CSS3

Comment définir le retournement de police en CSS3

WBOYoriginal: 2022-08-11 17:33:073162parcourir

En CSS3, vous pouvez utiliser l'attribut transform avec la fonction rotate() pour définir le retournement de la police. Définissez simplement le paramètre dans la fonction rotate() sur "180deg" ; ) fonction Le style de rotation des éléments peut être défini et la syntaxe est "font element {transform:rotate(180deg);}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment définir l'inversion de police en CSS3

En CSS, si vous souhaitez faire pivoter la police de 180 degrés, vous pouvez utiliser l'attribut transform et la fonction rotate().

Transform est l'une des fonctionnalités perturbatrices de CSS3. Il peut réaliser le déplacement, la rotation, l'inclinaison et la mise à l'échelle des éléments, et prend même en charge la méthode matricielle. Avec la transition et les connaissances en animation que vous êtes sur le point d'apprendre, il peut remplacer un. un grand nombre de choses qui n'étaient auparavant possibles qu'avec Flash ont été réalisées.

Transformer signifie littéralement déformation. En CSS3, plusieurs opérations prises en charge par la transformation incluent

(1) rotation,
(2) inclinaison,
(3) mise à l'échelle, échelle
(4). ) déplacer traduire
(5) matrice de déformation matricielle.

La fonction rotate() définit la rotation 2D et l'angle est spécifié à 180 degrés dans les paramètres.

Dans le système de coordonnées CSS, la direction positive de l'axe X est de gauche à droite, la direction positive de l'axe Y est de haut en bas et la direction positive de l'axe Z est de l'intérieur de l'écran. vers l’extérieur de l’écran.

Lorsque la ligne de visée de l'observateur est dans la direction positive de l'élément tourne dans le sens inverse des aiguilles d'une montre, et si elle est négative, cela signifie que l'élément tourne dans le sens des aiguilles d'une montre

Lorsque la ligne de visée de l'observateur est dans la direction positive de l'axe Z ; , rotateZ est positif, ce qui signifie que l'élément tourne dans le sens inverse des aiguilles d'une montre, et s'il est négatif, cela signifie que l'élément tourne dans le sens des aiguilles d'une montre.

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  p{
    width:200px;
    transform:rotate(180deg);
  }
  </style>
</head>
<body>
  <p>字体翻转</p>
</body>
</html>

Résultat de sortie :

Comment définir le retournement de police en CSS3 (Partage de vidéos d'apprentissage :

tutoriel vidéo CSS

, tutoriel vidéo HTML)

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

Article précédent：Implémenter l'effet de coins arrondis en CSS3Article suivant：Implémenter l'effet de coins arrondis en CSS3

Articles Liés

Voir plus