Maison > Article > interface Web > Comment mettre à l'échelle et faire pivoter en CSS

Comment mettre à l'échelle et faire pivoter en CSS

WBOYoriginal: 2021-12-03 10:04:003045parcourir

En CSS, vous pouvez utiliser l'attribut transform pour obtenir les effets de rotation et de mise à l'échelle des éléments. La syntaxe est "element {transform:scale (valeur de mise à l'échelle horizontale, valeur de mise à l'échelle verticale); transform:rotate (valeur de l'angle de rotation);} ".

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

Comment mettre à l'échelle et faire pivoter en CSS

En CSS, vous pouvez utiliser l'attribut transform pour définir la mise à l'échelle et la rotation des éléments. La fonction de cet attribut est de faire pivoter, mettre à l'échelle, déplacer ou incliner l'élément.

1. Mise à l'échelle

Lorsque la valeur de transform est scale(), l'élément peut être mis à l'échelle. L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<style> 
div
{margin:30px;
width:200px;
height:100px;
background-color:yellow;
transform:scale(0.5,0.5);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

Résultat de sortie :

Comment mettre à léchelle et faire pivoter en CSS

2. transform Lorsque la valeur est rotate(), vous pouvez définir l'opération de rotation de l'élément. L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<style> 
div{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
transform:rotate(9deg);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

Résultat de sortie :

(Partage vidéo d'apprentissage : Comment mettre à léchelle et faire pivoter en CSS Tutoriel vidéo CSS

)

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 écrire un rectangle arrondi en CSSArticle suivant：Comment écrire un rectangle arrondi en CSS

Articles Liés

Voir plus