Búsqueda personalizada
 
 
 
 
Transformaciones 2D: escalado (transform:scale)
   

Otra funcin de transformacin 2D es el escalado, esta funcin permite agrandar o reducir el tamao del elemento. La primer sintaxis que podemos utilizar es la siguiente:

Elemento { 
     transform: scale(valorx ,valory); 
}

El primer parmetro indica la escala para x (con el valor 1 el elemento queda como est, con un valor mayor crece y con un valor menor decrece), el segundo parmetro es para la escala en y.

Por ejemplo si queremos que sea del doble de ancho y la mitad de altura luego ser:

Elemento { 
     transform: scale(2 ,0.5); 
}

Un recuadro escalado con 20% menos de ancho y 20% ms de alto (definiendo el punto de origen en el vrtice superior izquierdo:

#recuadro1{
  -ms-transform: scale(0.8 , 1.2);
  -webkit-transform: scale(0.8 , 1.2);
  -moz-transform: scale(0.8 , 1.2);
  -o-transform: scale(0.8 , 1.2);
  transform: scale(0.8 , 1.2);

  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;

  border-radius: 20px;  
  background-color:#ddd;
  width:200px;
  padding:10px;
}
transform:scale

Si tenemos que escalar solo en x o en y podemos utilizar alguna de las dos funciones scaleX o scaleY.

Elemento { 
     transform: scaleX(2); 
}
Elemento { 
     transform: scaleY(0.5); 
}

Otra posibilidad es utilizar un valor negativo, lo que nos permite tener una reflexin del elemento. Por ejemplo un recuadro con reflexin en y:

#recuadro2{
  -ms-transform: scale(1.20 ,-1);
  -webkit-transform: scale(1.20 ,-1);
  -moz-transform: scale(1.20 ,-1);
  -o-transform: scale(1.20 ,-1);
  transform: scale(1.20 ,-1);

  border-radius: 20px 40px 40px 20px;  
  background-color:#aa0;
  width:200px;
  padding:10px;
  margin-top:70px;
}

Cuya imagen es:

transform:scale
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion