Últimos temas
» [SKIN] Hello? how are you
por Unity Vie Ene 06, 2017 11:55 pm

» Pack 1 de html (personaje + firma)
por Rose Jue Ene 05, 2017 5:19 pm

» [FIRMA] Mikagura Suite
por Natty Mar Dic 27, 2016 9:57 am

» [SKIN] Attack No Titan
por Flowman Jue Dic 15, 2016 8:51 pm

» Owari no seraph's
por Cool Skelleton_95 Mar Nov 15, 2016 2:04 pm

» Simple flutter
por Amaranth Miér Oct 26, 2016 8:54 am

» Duda sobre sorteo de skin
por SS Jue Sep 15, 2016 8:22 pm

» [MOVIL] [ FA ] Haikyuu
por Sarisha Mar Ago 30, 2016 6:07 am

» Pedido grafico
por DangerStRichard Dom Ago 28, 2016 7:09 pm


{TUTORIAL HTML} Modificar cajitas

Ver el tema anterior Ver el tema siguiente Ir abajo

{TUTORIAL HTML} Modificar cajitas

Mensaje por Mikae el Miér Jun 29, 2016 10:03 pm

Transformar cajas
Nombre del tutorial: Transformar cajas
Dificultad: Media
Tiempo de lectura: 10 minutos.
Creador del tutorial: Mikae
Si está dedicado a alguien en particular: Todo aquel que lo lea  

Bases y Recordatorios

Permite a un elemento cambiar de forma, tamaño o posición.
La transformación en si no es ninguna animación, sino que simplemente se muestra el elemento cambiado, sin embargo las transformaciones pueden utilizarse en animaciones y transiciones, de manera que vemos cómo el elemento cambia de forma, tamaño o posición. Esto también ayuda a diferentes tipos de hover.

NAVEGADORES : Esta propiedad sólo funciona en los navegadores de forma experimental, por lo que debemos ponerle los siguientes prefijos: -moz- para Firefox; -webkit- para Safari y Chrome; -o- para Opera; -ms- Para Internet Explorer 9. En Internet Explorer 8 o versiones anteriores no funciona esta propiedad.

Manos a la obra

Comenta para ver, esto te ayudará a cambiar y modificar estilos de hovers.

translate
translate:
Este elemento cambia la posición donde indican los pixeles.

Código:
transform: translate(XXpx,YYpx);
Dentro del paréntesis pondremos dos parámetros, el primero es la traslación que se produce en horizontal, hacia la derecha, (eje X), y el segundo la traslación en vertical, hacia abajo (eje Y).

Veamos un pequeño ejemplo.

Código:
transform: translate(150px,20px);-moz-transform: translate(150px,20px);-webkit-transform: translate(150px,20px);-o-transform: translate(150px,20px);-ms-transform: translate(150px,20px);

En ese code lo básico es transform: translate(150px,20px);  pero como decía arriba , para visualización de navegadores diferentes de agrega -moz , -webkit . -o , -ms. Entonces al transform: translate(150px,20px); al lado se la agrega el -moz o -ms , lo recomendable son poner las cuatro para visualización de todos los navegadores.


Resultado original sin el translate:
Elemento original
Resultado con translate:
transform: translate (10px,100px)
Los métodos tanslateX y translateY desplazan también el elemento de su posición original, funcionan igual que el método translate pero sólo en una dirección, por eso sólo tienen un parámetro:
transform: translateX(150px);
Desplaza el elemento a lo largo del eje X (horizontal).
transform: translateY(20px);
Desplaza el elemento a lo largo del eje Y (vertical).


scale
Spoiler:
Este elemento ayuda a reducir o aumentar el tamaño. Los parámetros son números que indican la proporción en la que se debe aumentar o reducir los decimales menores que 1 reducen el tamaño.

Código:
transform: scale(1.2,0.8);
Este método utiliza dos parámetros, que son dos números, el primer número indica indica la proporción en el eje X (horizontal), y el segundo en el eje Y (vertical).

Código:
transform: scale(1.2,0.8);-moz-transform: scale(1.2,0.8);-webkit-transform: scale(1.2,0.8);-o-transform: scale(1.2,0.8);-ms-transform: scale(1.2,0.8);

En ese code lo básico es transform: scale(1.2,0.Cool;  pero como decía arriba , para visualización de navegadores diferentes de agrega -moz , -webkit . -o , -ms. Entonces al transform: scale(1.2,0.Cool; al lado se la agrega el -moz o -ms , lo recomendable son poner las cuatro para visualización de todos los navegadores.


Sin scale:
transform: scale (0.8,1.2);


Con scaler:

;-moz-transform: scale(1.2,0.Cool;-webkit-transform: scale(1.2,0.Cool;-o-transform: scale(1.2,0.Cool;-ms-transform: scale(1.2,0.Cool;">transform: scale (0.8,1.2);


transform: scaleX(0.0);
el método scaleX aumenta o disminuye el tamaño en el eje X u horizontal.
transform: scaleY(0.0);
el método scaleX aumenta o disminuye el tamaño en el eje Y o vertical.

Rotate
Spoiler:
Este metodo gira el elemento , el angulo se indica por parametros.

Código:
transform: rotate(XXdeg);
El ángulo de rotación indicado en el parámetro puede indicarse en grados (deg) o en radianes (rad)

Código:
transform: rotate(50deg);-webkit-transform: rotate(50deg);-o-transform: rotate(50deg);-ms-transform: rotate(50deg);

En ese code lo básico es transform: rotate(50deg);  pero como decía arriba , para visualización de navegadores diferentes de agrega -moz , -webkit . -o , -ms. Entonces al transform: rotate(50deg); al lado se la agrega el -moz o -ms , lo recomendable son poner las cuatro para visualización de todos los navegadores.


Sin rotate:
transform: rotate(50deg);


Con rotate:
transform: rotate(50deg);

transform: skew
Spoiler:
skew sesga el elemento original, es decir lo convierte en un romboide.

Código:
transform: skew(XXdeg,YYdeg);
El primer parámetro indica la inclinación de los lados verticales, y el segundo el de los lados horizontales. Los ángulos negativos inclinan el elemento hacia el lado contrario.

Código:
transform: skew(10deg,25deg);-moz-transform: skew(10deg,25deg);-webkit-transform: skew(10deg,25deg);-o-transform: skew(10deg,25deg);-ms-transform: skew(10deg,25deg);
En ese code lo básico es transform: skew(10deg,25deg); pero como decía arriba , para visualización de navegadores diferentes de agrega -moz , -webkit . -o , -ms. Entonces al transform: skew(10deg,25deg); al lado se la agrega el -moz o -ms , lo recomendable son poner las cuatro para visualización de todos los navegadores.

Con skew:
transform: skew(10deg,25deg);


skewY inclina sólo los lados horizontales, es por eso que sólo tienen un parámetro:
transform: skewX(10deg);
Los lados verticales se inclinan 10 grados, y los horizontales se quedan en la misma línea.
transform: skewY(15deg);
Los lados horizontales se inclinan 15 grados, y los verticales se quedan en la misma línea.


mikae © 2016
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.