Maison > Article > interface Web > Quelles sont les unités d'angle en CSS ?

Quelles sont les unités d'angle en CSS ?

青灯夜游original: 2020-11-20 16:26:0511379parcourir

Les unités d'angle en CSS sont : 1. deg, degré (Degress), un cercle avec un total de 360 degrés ; 2. grad, dégradés (Gradians), un cercle avec un total de 400 dégradés ; . rad, radians (Radians) ), un cercle a un total de 2π radians 4. tour, tours (Tours), un cercle a un total de 1 tour ;

Unité d'angle en CSS

1, deg

Dégress. Un cercle a un total de 360 degrés

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

Quelles sont les unités dangle en CSS ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-o-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
}
</style>
</head>
<body>
<div>transform:rotate(2deg);</div>
</body>
</html>

2, grad

Gradians. Un cercle a un total de 400 gradients

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

Quelles sont les unités dangle en CSS ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2grad);
-webkit-transform:rotate(2grad);
-o-transform:rotate(2grad);
-ms-transform:rotate(2grad);
transform:rotate(2grad);
}
</style>
</head>
<body>
<div>transform:rotate(2grad);</div>
</body>
</html>

3, rad

Radians. Un cercle a un total de 2π radians

90deg = 100grad = 0,25 tour ≈ 1,570796326794897rad

Quelles sont les unités dangle en CSS ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2rad);
-webkit-transform:rotate(2rad);
-o-transform:rotate(2rad);
-ms-transform:rotate(2rad);
transform:rotate(2rad);
}
</style>
</head>
<body>
<div>transform:rotate(2rad);</div>
</body>
</html>

4 tour

Tourne. Un cercle fait un total de 1 tour

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

Quelles sont les unités dangle en CSS ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-webkit-transform:rotate(.5turn);
-o-transform:rotate(.5turn);
-ms-transform:rotate(.5turn);
transform:rotate(.5turn);
}
</style>
</head>
<body>
<div>transform:rotate(.5turn);</div>
</body>
</html

Pour plus de connaissances liées à la programmation, veuillez visiter :

Enseignement de la programmation ! !

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：Comment définir la police pour qu'elle s'affiche à gauche en CSSArticle suivant：Comment définir la police pour qu'elle s'affiche à gauche en CSS

Articles Liés

Voir plus