Recommandation de cours :

Fonction scale3d() de CSS

Définition et utilisation scale3d() La mise à l'échelle 3D est définie dans CSS.

scale3d() La fonction définit la mise à l'échelle 3D de l'élément.

scale3d() La fonction définit les valeurs de mise à l'échelle de l'élément dans les directions x, y et z. transform utilisée dans l'attribut.

Instance

Exemple 1

Utilisation scale3d() Mise à l'échelle de plusieurs éléments <div> :

#myDiv1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#myDiv2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#myDiv3 {
  transform: scale3d(1.1, 1.2, 1);
}

Essayer par vous-même

Exemple 2

Utilisation scale3d() Mise à l'échelle de l'image :

#img1 {
  transform: scale3d(0.8, 0.8, 0.8);
}
#img2 {
  transform: scale3d(-0.5, -0.5, -0.5);
}
#img3 {
  transform: scale3d(1.1, 1.1, 1);
}

Essayer par vous-même

Syntaxe CSS

scale3d(sx, sy, sz)
Valeur Description
sx Un nombre positif ou négatif, définissant le vecteur de mise à l'échelle de la largeur.
sy Un nombre positif ou négatif, définissant le vecteur de mise à l'échelle de la hauteur.
sz Un nombre positif ou négatif, définissant le vecteur de mise à l'échelle de la direction z.

Détails techniques

Version : Module de transformations CSS Niveau 2

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opéra
12 12 10 4 15

Pages connexes

Tutoriel :Transformation 3D CSS

Référence :Attribut transform CSS

Référence :Propriété CSS scale

Référence :Fonction scale() CSS

Référence :Fonction scaleX() CSS

Référence :Fonction scaleY() CSS