From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../es/web/css/transform-function/scale/index.html | 123 +++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 files/es/web/css/transform-function/scale/index.html (limited to 'files/es/web/css/transform-function/scale/index.html') diff --git a/files/es/web/css/transform-function/scale/index.html b/files/es/web/css/transform-function/scale/index.html new file mode 100644 index 0000000000..bd6304eb52 --- /dev/null +++ b/files/es/web/css/transform-function/scale/index.html @@ -0,0 +1,123 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +tags: + - CSS Scale + - scale() + - scaleX() + - scaleY() +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +--- +
{{CSSRef}}
+ +

La función CSS scale() define una transformación que modifica el tamaño de un elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un vector, puede cambiar el tamaño de la dimensiones horizontal y vertical a diferentes escalas. Su resultado es un dato tipo {cssxref("<transform-function>")}} .

+ +

+ +

Esta transformación de escalado se caracteriza por un vector bidimensional. Sus coordenadas definen cuanto escalamiento se realiza en cada dirección. Sí ambas coordenadas son iguales, la escala es uniforme (isotrópica) y la relación de aspecto del elemento se conserva (esta es una transformación homotética).

+ +

Cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.

+ +
La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.
+ +

Sintaxis

+ +

La función scale () se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.

+ +
scale(sx) scale(sx, sy)
+
+ +

Valores

+ +
+
sx
+
Es un {{cssxref("<número>")}} representando la abscisa del vector de escala.
+
sy
+
Es un {{cssxref("<número>")}} representado la ordenada de la escala del vector.  Si no está presente, su valor por defecto es sx, llevando a una escala uniforme preservando la curva del elemento.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas Cartesianas en ℝ2Coordenadas Homogéneas en ℝℙ2Coordenadas Cartesianas en ℝ3Coordenadas Homogéneas en ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
+ +

Ejemplos

+ +

Escalar las dimensiones X e Y al mismo tiempo

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(0.7); /* Igual que: scaleX(0.7) scaleY(0.7) */
+  background-color: pink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

+ +

Escalando dimensiones X e Y por separado y trasladando el origen

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(2, 0.5); /* Igual que: scaleX(2) scaleY(0.5) */
+  transform-origin: left;
+  background-color: pink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

+ +

Compatibilidad con navegadores

+ +

Please see the <transform-function> data type for compatibility info.

+ +

También puede ver

+ + -- cgit v1.2.3-54-g00ecf