JMiur [E]

Las transformaciones de un elemento utilizando sólo CSS son uno de los proyectos de la versión 3 que aún se discute y que algunos navegadores ya imprementan con ciertas variantes. En teoría, será tan simple como escribir cualquier otra propiedad:
transform: funcion(parámetros);
En los navegadores se usan de este modo:
-moz-transform: funcion(parámetros); // en Mozilla
-webkit-transform: funcion(parámetros); // en Safari y Chrome
-o-transform: funcion(parámetros); // en Opera
No tienen equivalencias en Internet Explorer aunque allí hay un filtro llamado Matrix que permitiría simularlas.

En principio, hay varias funciones:

scale(x,y)
Aumenta o disminuye el tamaño del elemento; su valor normal es 1. Valores superiores aumentan su tamaño e inferiores lo disminuyen así, 1.5 hará que se vea un 50% más grande y 0.5 un 50% más chico; si sólo se coloca un valor, este se aplica a ambas direcciones, caso contrario, el primero indica el ancho y el segundo el alto.

scaleX(x) y scaleY(y) son lo mismo pero sólo afectan al ancho (X) o al alto (Y).

por ejemplo:
-moz-transform:scale(2); -webkit-transform:scale(2); -o-transform:scale(2);

colocar el cursor encima para ver el efecto




En IE es posible utilizarla con bastante facilidad cuando se trata de cosas simples porque el resultado no va a ser el mismo, para eso, es necesario que el elemento sea un layout y lo conseguimos adicionándole la propiedad zoom: 1; que es la misma que usaremos para luego cambiarle la escala:
zoom: 1; el elemento no cambia
zoom: 1.5; aumentar su tamaño
zoom: 0.5; disminuye su tamaño

colocar el cursor encima para ver el efecto


rotate(a)
Gira un elemento. El valor se expresa en grados, si es positivo gira en el sentido de las agujas del rejo, si es negativo, en el sentido contrario.
-moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg);
En IE puede usarse algún filtro que calculamos usando esta herramienta; por ejemplo:
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455);
zoom: 1;

un ejemplo

un ejemplo

un EjEmplo


skew(a, b)
Skew significa sesgar o sea, inclinar y eso hace esta propiedad que también utiliza ángulos como valor, el primero afecta al eje X (horizontal) y el segundo al eje Y (vertical).

skewX(a) y skewY(a) hacen lo mismo pero sólo sobre uno de los ejes.
-moz-transform:skew(5deg); -webkit-transform:skew(5deg); -o-transform:skew(5deg);





translate(x, y)
Desplaza el elemento, el primer valor lo hace en el eje horizontal y el segunod en el eje vertical.

translateX(x) y translateY(x) hacen lo mismo pero sólo sobre uno de los ejes.
-moz-transform:translate(20px); -webkit-transform:translate(20px); -o-transform:translate(20px);

un ejemplo

un ejemplo

un ejemplo

matrix(a, c, b, d, x, y)
Es una combinación de todos ellos, por ejemplo:

matrix (1, 0, 0, 1, x, y) equivale a translate x e y
matrix (x, 0, 0, y, 0, 0) equivale a scale x e y
matrix (1, y, x, 1, 0, 0) equivale a skew x e y

Por defecto, un elemento sin deformaciones tendría esta propiedad: matrix(1, 0, 0, 1, 0px, 0px) así que en este ejemplo:
matrix(1.5, 0.1, 0.8, 1.2, -10px, 0px):
1.5 es la escala X
0.1 es la inclinacion sobre el eje X
0.8 es la inclinacion sobre el eje Y
1.2 es la escala Y
-10px es el desplazamiento horizontal
0px es el desplazamiento vertical

Y eso generaría una cosa rara:

último ejemplo

13 comentarios:

Víctor  

Osea que esto podría servir para crear ventanas modales en blogger declarándolas desde la hoja de estilos (.post img) sin tener que ponerle un "rel" a cada una de ellas, ¡BRILLANTE!, si le sumas a esto un oscurecimiento en la pantalla podríamos tener al fin la ventana modal ideal para las imágenes en nuestros blogs...

Responder
JMiur  

Pué si te refieres al zoom en realidad no reemplaza las ventanas modales ya que una ventana modal no carga la imagen a ser mostrada hasta que el visitante hace click en el enlace correspondient; en cambio, usando el zoom, debes cargar la imagen original y, en todo caso, mostrarla reducida. Eso no será bueno para el peso del blog.

Responder
Graciela  

De ésto te hablaba cuando decía sobre los bordes, pero como no sé expresarme te hago semejante lío!

Genial para jugar, abran la puerta que allí voy :P

Chasgracias Don Jmiur!

Responder
Oloman  

Como siempre, muy interesantes tus apuntes sobre CSS3 ¿O ya van por el 4? :)

Responder
JMiur  

Juegue, Graciela. Esto puede ser muy divertido :D

Oloman: Confieso que yo dejé de contar en el 2 ... por el tiempo que estas cosas llevan dando vueltas, deben andar por el 124 y contando :D

Responder
Victor Raul Zambrano Oimas  

hola como estan, bueno una pregunta estoy haciendo un blog y quisiera saber si se puede integrar los comentarios de facebook a blogger, como en esta pagina

http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/

http://www.allblogtools.com/Demo/demo.html?iframe=http://facebook-comments-for-blogger.blogspot.com/2010/05/hi-test-2.html

gracias por su respuesta.

Responder
JMiur  

Fíjate en esta entrada

Responder
roberto  

hey me gusto mucho tu post excelente en especial
las imagenes de ghost de pacman, ademas de la
explicacion no hay donde perderse

E X C E L E N T E !!

Responder
griego62  

Hola. Estoy tratando de reproducir el rotate transform pero no me sale. Lo he revisado y revisado pero....nada. Alguien que me pudiera echar la mano? Les pego el CSS y HTML:

.rotate {
color: #FF0000;
background-color: #ADD8E6;
font-family: "Courier New", Courier, monospace;
text-decoration: none;
width: 35%;
font-size: 1.3em;
transform:rotate(5deg);
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
display: inline-block;
cursor: pointer;
}

Luego, le pongo un div class="rotate" en el html y....nada.

¿Donde estoy mal? Ojalá que alguien me pueda ayudar. Gracias y saludos.

JMiur  

¿Y que contenido tiene ese div? Debes msotrar tu ejemplo concreto ya que si esta vacio, no tiene altura y por lo tanto es invisible.

Responder
griego62  

Gracias por tu pronta respuesta. No pongo la etiqueta completa porque no las acepta pero es así: div class="rotate">más artículos</div...y sí aparece con su inclinación correcta pero no puedo reproducir el efecto que tienes como ejemplo. ???????

JMiur  

No sé cuál es el efecto que quieres reproducir pero, si quieres que rote cuando pones el cursor encima, la rotación debe estar en:

.rotate:hover {}

griego62  

Listo!!! Agradezco mucho tu ayuda....muy interesante y útil tu blog! Saludos.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR