Maison > Article > interface Web > Quelles sont les propriétés permettant d'obtenir un effet de zoom en CSS3

Quelles sont les propriétés permettant d'obtenir un effet de zoom en CSS3

WBOYoriginal: 2022-06-08 15:51:124848parcourir

En CSS3, l'attribut qui peut obtenir l'effet de mise à l'échelle est "transform" ; cet attribut peut être utilisé avec la fonction scale() pour mettre à l'échelle l'élément. Lorsque le paramètre est défini sur un, cela signifie que l'ensemble horizontal et vertical. la mise à l'échelle sera effectuée. Lorsque le paramètre est défini Lorsqu'il est égal à deux, cela signifie définir respectivement les facteurs de mise à l'échelle horizontale et verticale, et la syntaxe est "élément {transform:scale (valeur de mise à l'échelle horizontale, valeur de mise à l'échelle verticale);}".

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

En CSS3, l'effet de mise à l'échelle peut être obtenu

En CSS3, l'attribut transform peut être utilisé en conjonction avec la fonction scale() pour obtenir l'effet de mise à l'échelle des éléments. L'attribut

transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément. La fonction

scale() est utilisée pour définir la mise à l'échelle 2D des éléments.

La syntaxe est la suivante :

元素{transform:scale(横向缩放值,竖向缩放值);}

L'exemple est le suivant :

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

Résultat de sortie :

Quelles sont les propriétés permettant dobtenir un effet de zoom en CSS3

(Partage vidéo d'apprentissage : 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：Quelle est la première ligne de code en HTML5Article suivant：Quelle est la première ligne de code en HTML5

Articles Liés

Voir plus