Que représente l'échelle CSS3 ?

En CSS3, scale signifie « mise à l'échelle » et est une fonction intégrée utilisée dans l'attribut transform, qui est utilisé pour effectuer une transformation de mise à l'échelle 2D ou 3D sur des éléments spécifiés, notamment : scale(), scaleX ; (), scaleY(), scaleZ(), scale3d().

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

En CSS3, scale signifie « zoom » et est une fonction intégrée utilisée dans l'attribut transform.

Il existe de nombreuses fonctions d'échelle pour l'attribut transform :

• scale()

• scaleX()

• scaleY()

• scaleZ()

• scale3d()

Ce qui change, ce n'est pas la largeur et la hauteur de l'élément, mais l'échelle des axes X et Y

scaleX(), scaleY()

　 Redimensionner l'élément, >1 pour agrandir, <1 pour réduire. La valeur par défaut est 1 ;

En regardant l'image ci-dessus, vous pouvez avoir l'impression que 100px est devenu 200px, mais en fait, ce n'est pas le cas. Ce qui change, ce n'est pas la largeur et la hauteur de l'élément.

En fait, ce qu'il change, ce n'est pas la largeur et la hauteur de l'élément, mais l'échelle des axes x et y↓

scale()

C'est une combinaison de les deux ci-dessus, c'est-à-dire que le premier paramètre est x et le deuxième paramètre est y

scale3d()

Le premier paramètre est x Le deuxième paramètre est y Le troisième paramètre est z , c'est-à-dire une combinaison de scalex scaley scalez.

Scalez, cette valeur est à l'origine en 3D, elle peut donc être un peu difficile à comprendre. Comme l'image ci-dessus, il s'agit à l'origine d'une image en 2D, peu importe la façon dont vous étirez son axe Z, vous ne verrez pas l'effet. Le principe est que votre dessin ne peut être étiré que s’il est en 3D, mais ne peut pas être étiré s’il est en 2D. S'il y a des amis qui ne savent pas où se trouve l'axe Z, veuillez cliquer ici → rotationZ

Explorez :

Tout d'abord, réfléchissons à un problème, utilisez rotation pour faire pivoter, puis le X et le Y les axes changeront avec la rotation Oui, alors si scaleX et Y sont ajoutés à ce moment, y aura-t-il un effet d'échelle pendant la rotation ?

Tout d'abord, observons l'effet de la rotation, puis de l'échelle :

Après avoir lu l'image ci-dessus, pensez-vous que lors de la rotation, elle tournera avec l'effet d'échelle. mais! Si vous changez les deux positions, les résultats seront complètement différents. Commencez par mettre à l'échelle puis faites pivoter

Comparez les deux images et vous constaterez que l'effet de la première image est bien l'effet d'échelle. tournent ensemble, alors comment se fait-il qu'ils soient différents s'ils changent de position ?

En fait, la rotation d'abord puis la mise à l'échelle (d'abord la rotation, puis la mise à l'échelle) provoqueront l'effet de rotation, mais d'abord la mise à l'échelle, puis la rotation (d'abord la mise à l'échelle, puis la rotation) n'entraîneront pas l'effet de mise à l'échelle. aura lieu et prendra effet à votre passage. Regardez l'illustration ci-dessous, le ratio zoomé restera en place, et au passage, le ratio sera restauré.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)

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!